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

Merge pull request #354 from andyhorng/fix-morphdom-swap

Browse Source 
Handle DocumentFragement in morphdom-swap properly
This commit is contained in:
1cg 2021-02-07 13:18:17 -07:00 committed by GitHub
commit d71a4b086f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/ext/morphdom-swap.js
View File

@ -4,8 +4,13 @@ htmx.defineExtension('morphdom-swap', {
},
handleSwap: function (swapStyle, target, fragment) {
if (swapStyle === 'morphdom') {
morphdom(target, fragment.outerHTML);
return [target]; // let htmx handle the new content
if (fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
morphdom(target, fragment.firstElementChild);
return [target];
} else {
morphdom(target, fragment.outerHTML);
return [target];
}
}
}
});

9
test/ext/morphdom-swap.js
View File

@ -28,4 +28,13 @@ describe("morphdom-swap extension", function() {
btn.innerHTML.should.equal("Clicked!Loaded!");
});
it('works with hx-select', function () {
this.server.respondWith("GET", "/test", "<button>Clicked!</button>!");
var btn = make('<button hx-get="/test" hx-ext="morphdom-swap" hx-swap="morphdom" hx-select="button" >Click Me!</button>')
btn.click();
should.equal(btn.getAttribute("hx-get"), "/test");
this.server.respond();
should.equal(btn.getAttribute("hx-get"), null);
btn.innerHTML.should.equal("Clicked!");
});
});

2
www/extensions/morphdom-swap.md
View File

@ -8,6 +8,8 @@ title: </> htmx - high power tools for html
This extension allows you to use the [morphdom](https://github.com/patrick-steele-idem/morphdom) library as the
swapping mechanism in htmx.
The `morphdom` library does not support morph element to multiple elements. If the result of `hx-select` is more than one element, it will pick the first one.
#### Usage
```html