Rivets.js todo list example

https://gist.github.com/mikeric/3345763

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
<section id='todo-list'>
	<input rv-on-keypress='add'>
	<ul>
		<li rv-each-todo='todos' rv-class-done='todo.done' rv-class-hide='todo.done'>
			<input type='checkbox' rv-checked='todo.done' rv-on-change='refresh'>
			{todo.summary}
		</li>
	</ul>
	<p>{remaining} remaining</p>          
	<section>
		<button rv-on-click='showAll'>Show All</button>
		<button rv-on-click='showActive'>Hide Completed</button>
	</section>
</section>

CSS

.done {
  opacity: 0.5;
  text-decoration: line-through;
}

.hide { display: none; }

JavaScript

var app = {
    todos: [{summary:'hello'}],
    showDone: true,
    hidden: function () { return this.todo.done && !app.showDone },
    showAll: function() { app.showDone = true; },
    showActive: function() { app.showDone = false; },
    refresh: function() { app.remaining = app.todos.filter(function (t) { return !t.done }).length; },
    
    add: function(ev) {
        if(ev.keyCode === 13) {
            app.todos.push({ summary: ev.currentTarget.value });
            app.refresh();
            ev.currentTarget.value = '';
        }
    }
};

app.refresh();
rivets.bind(document.getElementById('todo-list'), app);