jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-21 23:39:37 +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

14
README.md
View File

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

42
test/index.js
View File

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