Umai is heavily inspired by Mithril.
Here is a demo showing how to update a liste a lite in asynchronous mode:
/** @jsx m */
import { m, mount, redraw } from 'umai';
const MAX = 11
const DATA = Array.from({ length: MAX }).map((_, i) => i)
let liste = [];
function sleep (ms) {
return new Promise((r, err) => {
setTimeout(r, ms)
})
}
let fillListe = (datas) => async () => {
const setup = (element) => {
const eventHandlers = {
mouseover: () => element.style.background = "red",
mouseout: () => element.style.background = "white"
};
Object.keys(eventHandlers).forEach(event => {
element.addEventListener(event, eventHandlers[event]);
});
};
for (var i of datas ) {
await sleep(200)
liste.push(
<h1
dom={setup}
style="cursor:pointer"
data-index={i}
onclick={(e) => {alert(e.target.innerText)}}
>
{i}
</h1>)
redraw()
}
}
const App = () => (
<div>
<h1>Dynamic Liste</h1>
<ul dom = {() => fillListe(DATA)()}>
{ liste }
</ul>
</div>
)
mount(document.body, App);
Top comments (0)