Todo app in RactiveJS #1

VirtualDOM Advent Calendar 2014

by Taro Muraoka

HTML

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<div id="todo_app"></div>

<script id='todo_template' type='text/ractive'>
    <h4>Todo items</h4>
    <ul>
        {{#each items:i}}
        <li>
            <button on-click='delItem:{{i}}'>Del</button>
            <span>{{title}}</span>
        </li>
        {{/each}}
    </ul>
    <input type='text' value='{{new_title}}' />
    <button on-click='addItem:{{new_title}}'>Add</button>
</script>

JavaScript

var items = [
    { "title": "buy milk" }
];

new Ractive({
    el: '#todo_app',
    template: '#todo_template',
    data: { items: items }
}).on({
    addItem: function (e, title) {
        items.push({ title: title });
        this.set('new_title', '');
    },
    delItem: function (e, n) {
        this.set('new_title', items.splice(n, 1)[0].title);
    }
});