diff --git a/src/ext/path-deps.js b/src/ext/path-deps.js
index e1264e79..36d83d5a 100644
--- a/src/ext/path-deps.js
+++ b/src/ext/path-deps.js
@@ -1,4 +1,9 @@
-(function(){
+(function(undefined){
+ 'use strict';
+
+ // Save a reference to the global object (window in the browser)
+ var _root = this;
+
function dependsOn(pathSpec, url) {
var dependencyPath = pathSpec.split("/");
var urlPath = url.split("/");
@@ -15,21 +20,39 @@
return false;
}
+ function refreshPath(path) {
+ var eltsWithDeps = htmx.findAll("[path-deps]");
+ for (var i = 0; i < eltsWithDeps.length; i++) {
+ var elt = eltsWithDeps[i];
+ if (dependsOn(elt.getAttribute('path-deps'), path)) {
+ htmx.trigger(elt, "path-deps");
+ }
+ }
+ }
+
htmx.defineExtension('path-deps', {
onEvent: function (name, evt) {
if (name === "htmx:afterRequest") {
var config = evt.detail.requestConfig;
// mutating call
if (config.verb !== "get") {
- var eltsWithDeps = htmx.findAll("[path-deps]");
- for (var i = 0; i < eltsWithDeps.length; i++) {
- var elt = eltsWithDeps[i];
- if (dependsOn(elt.getAttribute('path-deps'), config.path)) {
- htmx.trigger(elt, "path-deps");
- }
- }
+ refreshPath(config.path);
}
- }
+ }
}
});
-})();
+
+ /**
+ * ********************
+ * Expose functionality
+ * ********************
+ */
+
+ _root.PathDeps = {
+
+ PathDeps.refresh: function(path) {
+ refreshPath(path);
+ }
+ };
+
+}).call(this);
diff --git a/test/ext/path-deps.js b/test/ext/path-deps.js
index 8dea9f70..315bd0b4 100644
--- a/test/ext/path-deps.js
+++ b/test/ext/path-deps.js
@@ -138,5 +138,24 @@ describe("path-deps extension", function() {
div.innerHTML.should.equal("Deps fired!");
});
+ it('path-deps api basic refresh case works', function () {
+ this.server.respondWith("GET", "/test", "Path deps fired!");
+ var div = make('
FOO
')
+ PathDeps.refresh("/test");
+ this.server.respond();
+ div.innerHTML.should.equal("Path deps fired!");
+ });
-});
\ No newline at end of file
+ it('path-deps api parent path case works', function () {
+ this.server.respondWith("GET", "/test1", "Path deps 1 fired!");
+ this.server.respondWith("GET", "/test2", "Path deps 2 fired!");
+ var div = make('FOO
')
+ var div2 = make('BAR
')
+ PathDeps.refresh("/test/child");
+ this.server.respond();
+ div.innerHTML.should.equal("Path deps 1 fired!");
+ this.server.respond();
+ div2.innerHTML.should.equal("Path deps 2 fired!");
+ });
+
+});
diff --git a/www/extensions/path-deps.md b/www/extensions/path-deps.md
index dbaebd91..65fb2916 100644
--- a/www/extensions/path-deps.md
+++ b/www/extensions/path-deps.md
@@ -5,14 +5,14 @@ title: > htmx - high power tools for html
## The `path-deps` Extension
-This extension supports expressing inter-element dependencies based on paths, inspired by the
+This extension supports expressing inter-element dependencies based on paths, inspired by the
[intercooler.js dependencies mechanism.](http://intercoolerjs.org/docs.html#dependencies). When this
extension is installed an element can express a dependency on another path by using the `path-deps` property
and then setting `hx-trigger` to `path-deps`:
```html
- ...
```
@@ -22,8 +22,8 @@ request like a `POST`) to `/foo/bar` or any sub-paths of that path.
You can use a `*` to match any path component:
```html
- ...
```
@@ -39,6 +39,23 @@ You can use a `*` to match any path component:
```
+#### Javascript API
+
+### Method - [`PathDeps.refresh()`](#refresh)
+
+This method manually triggers a refresh for the given path.
+
+##### Parameters
+
+* `path` - the path to refresh
+
+##### Example
+
+```js
+ // Trigger a refresh on all elements with the path-deps attribute '/path/to/refresh', including elements with a parent path, e.g. '/path'
+ PathDeps.refresh('/path/to/refresh');
+```
+
#### Source