blob: 0137e6bea843919b4a5e2375f9c1ae3bea28acbc (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
+++
title = "path-deps"
+++
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
<div hx-get="/example"
hx-trigger="path-deps"
path-deps="/foo/bar">...</div>
```
This div will fire a `GET` request to `/example` when any other element issues a mutating request (that is, a non-`GET`
request like a `POST`) to `/foo/bar` or any sub-paths of that path.
You can use a `*` to match any path component:
```html
<div hx-get="/example"
hx-trigger="path-deps"
path-deps="/contacts/*">...</div>
```
## Install
```html
<script src="https://unpkg.com/htmx.org/dist/ext/path-deps.js"></script>
```
## Usage
```html
<div hx-ext='path-deps'>
<ul hx-get="/list" hx-trigger="path-deps" path-deps="/list">
</ul>
<button hx-post="/list">
Post To List
</button>
</div>
```
### 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');
```
|
