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