DEV Community

artydev
artydev

Posted on

1

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

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay