Last active
June 6, 2017 02:31
-
-
Save deepak1556/465492d9319e530534b2 to your computer and use it in GitHub Desktop.
virtual-dom with dom-delegator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | |
var Delegator = require('./dom-delegator') | |
var state = { | |
clicks: function (ev) { | |
delegator.unlistenTo('click') | |
console.log(ev) | |
} | |
} | |
// 1: Create a function that declares what the DOM should look like | |
function render(count) { | |
return h('div.foo', { | |
style: { | |
textAlign: 'center', | |
lineHeight: '100px', | |
border: '1px solid red', | |
width: '100px', | |
height: '100px' | |
}, | |
'ev-click': state.clicks | |
}, [String(count)]); | |
} | |
// 2: Initialise the document | |
var count = 0; // We need some app data. Here we just store a count. | |
var tree = render(count); // We need an initial tree | |
var rootNode = createElement(tree); // Create an initial root DOM node ... | |
document.body.appendChild(rootNode); // ... and it should be in the document | |
console.log(tree) | |
var delegator = Delegator() | |
delegator.listenTo('click') | |
// 3: Wire up the update logic | |
setInterval(function () { | |
count++; | |
var newTree = render(count); | |
var patches = diff(tree, newTree); | |
rootNode = patch(rootNode, patches); | |
tree = newTree; | |
}, 1000); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment