-
Notifications
You must be signed in to change notification settings - Fork 7
/
virtual-dom.js
48 lines (39 loc) · 1.18 KB
/
virtual-dom.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// This example uses ./list.js (an element created with base-element)
// in use with virtual-dom: https://github.com/Matt-Esch/virtual-dom
var List = require('./list.js')
var h = require('virtual-dom/h')
var diff = require('virtual-dom/diff')
var patch = require('virtual-dom/patch')
var createElement = require('virtual-dom/create-element')
// Data for the list
var data = ['one', 'two', 'three']
// Create a list that does not automatically appendTo
// as we'll be handling that with virtual-dom
var list = new List()
// When item clicked
list.addEventListener('clicked', function (item) {
window.alert('You clicked ' + item.innerHTML)
})
// When item added
list.addEventListener('added', function () {
data.push(String(Math.random() * 9999))
list.render(data)
})
// Main render function
function render () {
return h('.my-list', [
'With ' + data.length + ' rows:',
list.render(data)
])
}
// Initial DOM tree render
var tree = render()
var rootNode = createElement(tree)
document.body.appendChild(rootNode)
// Main render loop
setInterval(function () {
var newTree = render()
var patches = diff(tree, newTree)
rootNode = patch(rootNode, patches)
tree = newTree
}, 100)