const state = { colors: [ randomColor(), randomColor(), randomColor() ] }; const directives = { bg: class { constructor() { this.node = null; } bind(node) { this.node = node; } unbind(node) { this.node = null; } update(color) { this.node.style.backgroundColor = color; } } } const view = Monkberry.render(Template, document.body, {directives}); view.update(state); view.on('click', 'button', () => { state.colors.push(randomColor()); view.update(state); }); function randomColor() { return '#' + Math.floor(Math.random() * 16777215).toString(16); }
<script type="text/monkberry" id="Template"> <ol> {% for color of colors %} <li :bg={{ color }}>{{ color }}</li> {% endfor %} </ol> <button>Add random color</button> </script>
body { background: #262E3D; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } ol { list-style: none; padding: 0; } li { width: 100px; padding: 5px; text-transform: uppercase; }