mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-30 06:21:19 +00:00
62 lines
1.5 KiB
Markdown
62 lines
1.5 KiB
Markdown
---
|
|
layout: layout.njk
|
|
title: </> htmx - high power tools for html
|
|
---
|
|
|
|
## The `path-deps` Extension
|
|
|
|
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>
|
|
```
|
|
|
|
#### 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
|
|
|
|
### <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
|
|
|
|
<https://unpkg.com/htmx.org/dist/ext/path-deps.js>
|