Todo app in RactiveJS #2

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 DEFAULT_ITEMS = [
    { "title": "buy milk" }
];

var ToDo = Ractive.extend({
    template: '#todo_template',
    addItem: function(title) {
        this.data.items.push({ title: title });
        this.set('new_title', '');
    },
    delItem: function(n) {
        this.set('new_title', this.data.items.splice(n, 1)[0].title);
    }
});

new ToDo({
    el: '#todo_app',
    data: { items: DEFAULT_ITEMS }
});