DEV Community

artydev
artydev

Posted on

Asynchronous Dynamic Liste in UMAI

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); 
Enter fullscreen mode Exit fullscreen mode

Demo

Top comments (0)