View
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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)
}
}