jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-22 07:49:38 +01:00
Code Packages Releases Activity

♻️ use eventsSink for n-binding

Browse Source
This commit is contained in:
Jan Andrle 2023-08-23 20:15:30 +02:00
parent 31563c4f7b
commit 7a2c3e6a4b
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
2 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -98,16 +98,14 @@ document.body.append(
``` ```
## Events and dynamic parts ## Events and dynamic parts
*investigation*:
```js ```js
const output_dynamic= (function(){ const output_dynamic= eventsSink(store=> ({
const element= el("span", { style: { fontWeight: "bold" }, textContent: "" });
return {
element, element,
onchange: listen("change", event=> assign(element, { textContent: event.target.value })) onchange: listen("change", event=> assign(store.element, { textContent: event.target.value }))
}; }));
})();
document.body.append( document.body.append(
output_dynamic.element, el("span", { style: { fontWeight: "bold" }, textContent: "" }, output_dynamic.target),
el("input", { type: "text" }, output_dynamic.onchange) el("input", { type: "text" }, output_dynamic.onchange)
); );
``` ```

34
test/index.js
View File

@ -22,36 +22,36 @@ function component({ value= "World" }= {}){
} }
`; `;
const output= (function(){ const output= eventsSink(store=> ({
const element= el("strong", { textContent: value });
return {
element,
onchange: listen("change", function(event){ onchange: listen("change", function(event){
assign(element, { textContent: event.target.value }); assign(store.element, { textContent: event.target.value });
}) })
} }));
})(); const input= eventsSink(store=> ({
const input= (function(){
const element= el("input", { type: "text", value }, output.onchange);
return {
element,
onchange: listen("change", function(event){ onchange: listen("change", function(event){
assign(element, { value: event.detail }); assign(store.element, { value: event.detail });
dispatch("change")(element); dispatch("change")(input.element);
}) })
}; }));
})();
return el("div", { className: name }, input.onchange).append( return el("div", { className: name }, input.onchange).append(
el("p").append( el("p").append(
el("#text", { textContent: "Hello " }), el("#text", { textContent: "Hello " }),
output.element, el("strong", { textContent: value }, output.target),
), ),
el("label").append( el("label").append(
el("#text", { textContent: "Set name:" }), el("#text", { textContent: "Set name:" }),
input.element el("input", { type: "text", value }, output.onchange, input.target)
) )
) )
} }
function eventsSink(fn){
const store= {
element: null,
target: function(element){ store.element= element; },
};
Object.assign(store, fn(store));
return store;
}
function createStyle(){ function createStyle(){
const style= el("style"); const style= el("style");
return { return {