itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-29 22:11:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

extension tests and clean up docs

Browse Source
This commit is contained in:
carson 2020-05-22 14:05:04 -07:00
parent ef152a73b9
commit 1dd4cabfa2
3 changed files with 48 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
test/attributes/hx-ext.js
View File

@ -48,4 +48,39 @@ describe("hx-ext attribute", function() {
ext3Calls.should.equal(0);
});
it('Extensions are merged properly', function () {
this.server.respondWith("GET", "/test", "Clicked!");
make('<div hx-ext="ext-1"><button id="btn-1" hx-get="/test" hx-ext="ext-2">Click Me!</button>' +
'<button id="btn-2" hx-get="/test" hx-ext="ext-3">Click Me!</button></div>')
var btn1 = byId("btn-1");
var btn2 = byId("btn-2");
btn1.click();
this.server.respond();
ext1Calls.should.equal(1);
ext2Calls.should.equal(1);
ext3Calls.should.equal(0);
btn2.click();
this.server.respond();
ext1Calls.should.equal(2);
ext2Calls.should.equal(1);
ext3Calls.should.equal(1);
});
it('supports comma separated lists', function () {
this.server.respondWith("GET", "/test", "Clicked!");
make('<div hx-ext="ext-1"><button id="btn-1" hx-get="/test" hx-ext="ext-2, ext-3 ">Click Me!</button></div>')
var btn1 = byId("btn-1");
var btn2 = byId("btn-2");
btn1.click();
this.server.respond();
ext1Calls.should.equal(1);
ext2Calls.should.equal(1);
ext3Calls.should.equal(1);
});
});

17
www/docs.md
View File

@ -481,17 +481,24 @@ This functionality is somewhat similar to [Turbolinks](https://github.com/turbol
## <a name="extensions"></a> [Extensions](#extensions)
Htmx has an extension mechanism that allows you to customize the libraries' behavior. Extensions are
defined in javascript and then used via the (`hx-ext`)[/attributes/hx-ext] attribute:
Htmx has an extension mechanism that allows you to customize the libraries' behavior. Extensions [are
defined in javascript](/extensions#defining) and then used via the [`hx-ext`](/attributes/hx-ext) attribute:
```html
<button hx-post="/example" hx-ext="debug">This button uses the debug extension</button>
```
If you are interested in adding an extension to htmx, please [see the extension docs](/extensions)
If you are interested in adding your own extension to htmx, please [see the extension docs](/extensions)
htmx offers some supported extensions that are tested against the htmx code base, such a the `debug` extension used
above. See the [officially extensions](/official-extensions) page.
Htmx offers some officially supported extensions that are tested against the htmx code base, including:
* [`debug`](/official-extensions#debug) - an extension for htmx debugging a particular element
* [`rails-method`](/official-extensions#rails-method) - an extension for including the `_method` parameter
[that rails uses](https://guides.rubyonrails.org/form_helpers.html#how-do-forms-with-patch-put-or-delete-methods-work-questionmark).
* [`morphdom-swap`](/official-extensions#morphdom-swap) - an extension for using the
[morphdom](https://github.com/patrick-steele-idem/morphdom) library as the swapping mechanism in htmx.
See the [officially extensions](/official-extensions) page for a complete list.
## <a name="events"></a> [Events & Logging](#events)

2
www/official-extensions.md
View File

@ -5,7 +5,7 @@ title: </> htmx - high power tools for html
## Official Extensions
The following extensions are tested against htmx and are considered officially supported.
The following extensions are tested against htmx and thus are considered officially supported.
### <a name="debug">[`debug`](#debug)