itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 07:21:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added documentation

Browse Source
This commit is contained in:
Johan Vosloo 2020-12-30 15:00:24 +01:00
parent b46e8ab10f
commit d529108045
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
www/extensions/path-deps.md
View File

@ -5,14 +5,14 @@ title: </> htmx - high power tools for html
## The `path-deps` Extension ## 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 [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 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`: and then setting `hx-trigger` to `path-deps`:
```html ```html
<div hx-get="/example" <div hx-get="/example"
hx-trigger="path-deps" hx-trigger="path-deps"
path-deps="/foo/bar">...</div> path-deps="/foo/bar">...</div>
``` ```
@ -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: You can use a `*` to match any path component:
```html ```html
<div hx-get="/example" <div hx-get="/example"
hx-trigger="path-deps" hx-trigger="path-deps"
path-deps="/contacts/*">...</div> path-deps="/contacts/*">...</div>
``` ```
@ -39,6 +39,23 @@ You can use a `*` to match any path component:
</div> </div>
``` ```
#### Javascript API
### <a name="refresh"></a> 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 #### Source
<https://unpkg.com/htmx.org/dist/ext/path-deps.js> <https://unpkg.com/htmx.org/dist/ext/path-deps.js>