mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-03 07:45:21 +00:00
Merge branch 'master' into dev
This commit is contained in:
commit
c1c9ce5a93
@ -2,9 +2,9 @@
|
|||||||
|
|
||||||
*high power tools for HTML*
|
*high power tools for HTML*
|
||||||
|
|
||||||
[](https://gitter.im/intercooler-js/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
[](https://gitter.im/intercooler-js/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
||||||
[](https://app.netlify.com/sites/htmx/deploys)
|
[](https://app.netlify.com/sites/htmx/deploys)
|
||||||
[]()
|
[](https://app.circleci.com/pipelines/github/bigskysoftware/htmx)
|
||||||
|
|
||||||
## introduction
|
## introduction
|
||||||
|
|
||||||
@ -53,4 +53,4 @@ keep the core htmx code tidy
|
|||||||
|
|
||||||
*javascript fatigue:<br/>
|
*javascript fatigue:<br/>
|
||||||
longing for a hypertext<br/>
|
longing for a hypertext<br/>
|
||||||
already in hand*
|
already in hand*
|
||||||
|
@ -24,9 +24,14 @@ htmx.defineExtension('client-side-templates', {
|
|||||||
if (nunjucksTemplate) {
|
if (nunjucksTemplate) {
|
||||||
var data = JSON.parse(text);
|
var data = JSON.parse(text);
|
||||||
var templateName = nunjucksTemplate.getAttribute('nunjucks-template');
|
var templateName = nunjucksTemplate.getAttribute('nunjucks-template');
|
||||||
return nunjucks.render(templateName, data);
|
var template = htmx.find('#' + templateName);
|
||||||
}
|
if (template) {
|
||||||
|
return nunjucks.renderString(template.innerHTML, data);
|
||||||
|
} else {
|
||||||
|
return nunjucks.render(templateName, data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return text;
|
return text;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -5,17 +5,26 @@ title: </> htmx - high power tools for html
|
|||||||
|
|
||||||
## htmx Extensions
|
## htmx Extensions
|
||||||
|
|
||||||
Htmx has an extension mechanism for defining and using extensions to the default behavior in a simple and obvious manner.
|
Htmx provides an extension mechanism for defining and using extensions within htmx-based applications.
|
||||||
|
|
||||||
## <a name="using"></a>[Using Extensions](#using)
|
## <a name="using"></a>[Using Extensions](#using)
|
||||||
|
|
||||||
To use an extension you use the [hx-ext](/attributes/hx-ext) attribute:
|
Using an extension involves two steps:
|
||||||
|
|
||||||
|
* include the extension definition, which will add it to the `htmx` extension registry
|
||||||
|
* reference the extension via the [hx-ext](/attributes/hx-ext) attribute
|
||||||
|
|
||||||
|
Here is an example
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
<script src="https://unpkg.com/htmx.org@0.0.4/dist/ext/debug.js"></script>
|
||||||
<button hx-post="/example" hx-ext="debug">This Button Uses The Debug Extension</button>
|
<button hx-post="/example" hx-ext="debug">This Button Uses The Debug Extension</button>
|
||||||
```
|
```
|
||||||
|
|
||||||
Note that the `hx-ext` tag may be placed on parent elements if you want a plugin to apply to an entire swath of the dom,
|
This loads the debug extension off of the `unpkg` CDN and then adds the debug extension to the given button. (This
|
||||||
|
will print out extensive logging for the button, for debugging purposes.)
|
||||||
|
|
||||||
|
Note that the `hx-ext` tag may be placed on parent elements if you want a plugin to apply to an entire part of the DOM,
|
||||||
and on the `body` tag for it to apply to all htmx requests.
|
and on the `body` tag for it to apply to all htmx requests.
|
||||||
|
|
||||||
**Tip:** To use multiple extensions on one element, separate them with a comma:
|
**Tip:** To use multiple extensions on one element, separate them with a comma:
|
||||||
@ -26,7 +35,10 @@ and on the `body` tag for it to apply to all htmx requests.
|
|||||||
|
|
||||||
## <a name="included"></a> [Included Extensions](#included)
|
## <a name="included"></a> [Included Extensions](#included)
|
||||||
|
|
||||||
The following extensions that are tested and distributed with htmx:
|
htmx includes a set of extensions out of the box that address common developer needs. These extensions are tested
|
||||||
|
against `htmx` in each distribution
|
||||||
|
|
||||||
|
### Included Extensions List
|
||||||
|
|
||||||
<div class="info-table">
|
<div class="info-table">
|
||||||
|
|
||||||
@ -39,6 +51,7 @@ The following extensions that are tested and distributed with htmx:
|
|||||||
| [`debug`](/extensions/debug) | an extension for debugging of a particular element using htmx
|
| [`debug`](/extensions/debug) | an extension for debugging of a particular element using htmx
|
||||||
| [`path-deps`](/extensions/path-deps) | an extension for expressing path-based dependencies [similar to intercoolerjs](http://intercoolerjs.org/docs.html#dependencies)
|
| [`path-deps`](/extensions/path-deps) | an extension for expressing path-based dependencies [similar to intercoolerjs](http://intercoolerjs.org/docs.html#dependencies)
|
||||||
| [`class-tools`](/extensions/class-tools) | an extension for manipulating timed addition and removal of classes on HTML elements
|
| [`class-tools`](/extensions/class-tools) | an extension for manipulating timed addition and removal of classes on HTML elements
|
||||||
|
| [`rails-method`](/extensions/rails-method) | includes the `_method` parameter in requests for rails compatibility
|
||||||
| [`remove-me`](/extensions/remove-me) | allows you to remove an element after a given amount of time
|
| [`remove-me`](/extensions/remove-me) | allows you to remove an element after a given amount of time
|
||||||
| [`include-vals`](/extensions/include-vals) | allows you to include additional values in a request
|
| [`include-vals`](/extensions/include-vals) | allows you to include additional values in a request
|
||||||
|
|
||||||
@ -46,7 +59,7 @@ The following extensions that are tested and distributed with htmx:
|
|||||||
|
|
||||||
## <a name="defining"></a>[Defining an Extensions](#defining)
|
## <a name="defining"></a>[Defining an Extensions](#defining)
|
||||||
|
|
||||||
To define an extension you need to call the `htmx.defineExtension()` function:
|
To define an extension you call the `htmx.defineExtension()` function:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script>
|
<script>
|
||||||
@ -58,9 +71,11 @@ To define an extension you need to call the `htmx.defineExtension()` function:
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
Extensions should have names that are dash separated like above and that are reasonably short and descriptive.
|
Typically, this is done in a stand-alone javascript file, rather than in an inline `script` tag.
|
||||||
|
|
||||||
Extensions can override the following default extension fields:
|
Extensions should have names that are dash separated and that are reasonably short and descriptive.
|
||||||
|
|
||||||
|
Extensions can override the following default extension points to add or change functionality:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
{
|
{
|
||||||
|
Loading…
x
Reference in New Issue
Block a user