Skip to content

Instantly share code, notes, and snippets.

@Risto-Stevcev
Created May 25, 2016 23:17
Show Gist options
  • Save Risto-Stevcev/d51f45997f1a818b6d21492475e07913 to your computer and use it in GitHub Desktop.
Save Risto-Stevcev/d51f45997f1a818b6d21492475e07913 to your computer and use it in GitHub Desktop.
Snabbdom standalone example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="//cdn.rawgit.com/risto-stevcev/snabbdom/master/dist/snabbdom.min.js"></script>
<script src="//cdn.rawgit.com/risto-stevcev/snabbdom/master/dist/snabbdom_style.min.js"></script>
<script src="//cdn.rawgit.com/risto-stevcev/snabbdom/master/dist/snabbdom_class.min.js"></script>
<script src="//cdn.rawgit.com/risto-stevcev/snabbdom/master/dist/snabbdom_props.min.js"></script>
<script src="//cdn.rawgit.com/risto-stevcev/snabbdom/master/dist/snabbdom_attributes.min.js"></script>
<script src="//cdn.rawgit.com/risto-stevcev/snabbdom/master/dist/snabbdom_eventlisteners.min.js"></script>
<script src="//cdn.rawgit.com/risto-stevcev/snabbdom/master/dist/h.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
var patch = snabbdom.init([
snabbdom_style,
snabbdom_class,
snabbdom_props,
snabbdom_attributes,
snabbdom_eventlisteners
]);
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