A library that hooks up DOM elements to state changes.
There are two basic ways to bind elements to state.
Create an element and pass it a handler that change its properties. Below, when foo
changes, handleFoo
is called.
import { ObservableVar, element } from 'element-ears';
const HelloEl = () => {
const foo = new ObservableVar(0);
const handleFoo = (el, value) => {
el.textContent = value;
}
return (
element('div', {
bind: [[foo, handleFoo]]
})
)
}
Create an element and pass it a callback that sets its children. Below, when foo
changes, the callback sets the span
as the child of the div
.
import { ObservableVar, bind, element } from 'element-ears';
const WorldEl = () => {
const foo = new ObservableVar(0);
return (
bind('div', {}, foo, (value) =>
element('span', {textContent: value})
)
)
}