The joy of top-down rendering.
Problem
I want to present data, ideally as view = render(data)
.
Solution
I really like the view mechanics provided by choo/yo-yo/bel.
const html = require('bel') const nanobus = require('nanobus') const yo = require('yo-yo') const bus = nanobus() const render = yo.update.bind(yo, document.body) const emit = bus.emit.bind(bus) bus.on('change', (name) => { const state = {} state.name = name.toUpperCase() render(view(state, emit)) }) function view(state, emit){ return html` <body> Hello, <input value="${state.name}" placeholder="name" onkeyup=${onKeyUp}> </body> ` function onKeyUp(e){ emit('change', e.target.value) } }