Skip to content

Instantly share code, notes, and snippets.

@Risto-Stevcev
Created May 28, 2016 12:39
Show Gist options
  • Save Risto-Stevcev/2c6ff7ee10b52756293cde08b0c6447c to your computer and use it in GitHub Desktop.
Save Risto-Stevcev/2c6ff7ee10b52756293cde08b0c6447c to your computer and use it in GitHub Desktop.
Snabbdom bundled standalone example
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.rawgit.com/risto-stevcev/snabbdom/master/dist/snabbdom.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
var patch = snabbdom.patch
, h = snabbdom.h;
var vnode = h('span', 'foobar');
var container = document.getElementById('app');
patch(container, vnode);
setTimeout(function() {
//var newVnode = h('span', {style: {fontWeight: 'bold', fontStyle: 'italic'}}, 'This is now bold italics');
//var newVnode = h('a', {class: {active: true, selected: false}}, 'Toggle');
//var newVnode = h('a', {props: {href: '/foo'}}, 'Go to Foo');
//var newVnode = h('a', {attrs: {href: '/foo'}}, 'Go to Foo');
function clickHandler(number) { console.log('button ' + number + ' was clicked!'); }
var newVnode = h('div', [
h('a', {on: {click: [clickHandler, 1]}, attrs: {href: '#'}}, '1'),
h('a', {on: {click: [clickHandler, 2]}, attrs: {href: '#'}}, '2'),
h('a', {on: {click: [clickHandler, 3]}, attrs: {href: '#'}}, '3'),
]);
patch(vnode, newVnode);
}, 1500);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment