sudsy/application.css

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

## application.js
var Todos = Stapes.subclass({
  all: function() {
    return this.getAllAsArray()
  },

  active: function() {
    return _.select(this.all(), function(todo) {
      return !todo.get('done')
    })
  }
})

var Todo = Stapes.subclass({})

var ViewModel = Stapes.subclass({
  constructor: function(todos) {
    this.todos = todos
  },

  init: function() {
    _.bindAll(this, 'setTodos', 'showAll', 'showActive', 'setRemaining', 'add')

    this.todos.on('change', this.setTodos)
    this.todos.on('change', this.setRemaining)
    this.showAll()
    this.setRemaining()
  },

  setTodos: function() {
    this.set('todos', this.todos[this.get('filter')]())
  },

  showAll: function() {
    this.set('filter', 'all')
    this.setTodos()
  },

  showActive: function() {
    this.set('filter', 'active')
    this.setTodos()
  },

  setRemaining: function() {
    this.set('remaining', this.todos.active().length)
  },

  add: function(ev) {
    if(ev.keyCode === 13) {
      todo = new Todo()
      todo.set('summary', ev.currentTarget.value)
      ev.currentTarget.value = ''
      this.todos.push(todo)
    }
  }
})

$(document).ready(function() {
  app = new ViewModel(new Todos())
  app.init()
  rivets.bind($('#todo-list'), {app: app})
})

## config.js
rivets.adapters[':'] = {
  subscribe: function(obj, keypath, callback) {
    obj.on("change:" + keypath, callback)
  },

  unsubscribe: function(obj, keypath, callback) {
    obj.off("change:" + keypath, callback)
  },

  read: function(obj, keypath) {
    return obj.get(keypath)
  },

  publish: function(obj, keypath, value) {
    obj.set(keypath, value)
  }
}

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Rivets.js todo list example</title>
  <script src='http://code.jquery.com/jquery-1.10.1.min.js'></script>
  <script src='http://underscorejs.org/underscore-min.js'></script>
  <script src='http://hay.github.io/stapes/stapes.min.js'></script>
  <script src='http://rivetsjs.com/dist/rivets.min.js'></script>
  <script src='config.js'></script>
  <script src='application.js'></script>
  <link rel='stylesheet' type='text/css' href='application.css'>
</head>

<body>
  <section id='todo-list'>
    <input rv-on-keypress='app.add'>

    <ul>
      <li rv-each-todo='app:todos' rv-class-done='todo:done'>
        <input type='checkbox' rv-checked='todo:done' rv-on-change='app.setRemaining'>
        { todo:summary }
      </li>
    </ul>

    <p>{ app:remaining } remaining</p>

    <section>
      <button rv-on-click='app.showAll'>Show All</button>
      <button rv-on-click='app.showActive'>Hide Completed</button>
    </section>
  </section>
</body>
</html>
	var Todos = Stapes.subclass({
	all: function() {
	return this.getAllAsArray()
	},

	active: function() {
	return _.select(this.all(), function(todo) {
	return !todo.get('done')
	})
	}
	})

	var Todo = Stapes.subclass({})

	var ViewModel = Stapes.subclass({
	constructor: function(todos) {
	this.todos = todos
	},

	init: function() {
	_.bindAll(this, 'setTodos', 'showAll', 'showActive', 'setRemaining', 'add')

	this.todos.on('change', this.setTodos)
	this.todos.on('change', this.setRemaining)
	this.showAll()
	this.setRemaining()
	},

	setTodos: function() {
	this.set('todos', this.todos[this.get('filter')]())
	},

	showAll: function() {
	this.set('filter', 'all')
	this.setTodos()
	},

	showActive: function() {
	this.set('filter', 'active')
	this.setTodos()
	},

	setRemaining: function() {
	this.set('remaining', this.todos.active().length)
	},

	add: function(ev) {
	if(ev.keyCode === 13) {
	todo = new Todo()
	todo.set('summary', ev.currentTarget.value)
	ev.currentTarget.value = ''
	this.todos.push(todo)
	}
	}
	})

	$(document).ready(function() {
	app = new ViewModel(new Todos())
	app.init()
	rivets.bind($('#todo-list'), {app: app})
	})
	rivets.adapters[':'] = {
	subscribe: function(obj, keypath, callback) {
	obj.on("change:" + keypath, callback)
	},

	unsubscribe: function(obj, keypath, callback) {
	obj.off("change:" + keypath, callback)
	},

	read: function(obj, keypath) {
	return obj.get(keypath)
	},

	publish: function(obj, keypath, value) {
	obj.set(keypath, value)
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Rivets.js todo list example</title>
	<script src='http://code.jquery.com/jquery-1.10.1.min.js'></script>
	<script src='http://underscorejs.org/underscore-min.js'></script>
	<script src='http://hay.github.io/stapes/stapes.min.js'></script>
	<script src='http://rivetsjs.com/dist/rivets.min.js'></script>
	<script src='config.js'></script>
	<script src='application.js'></script>
	<link rel='stylesheet' type='text/css' href='application.css'>
	</head>

	<body>
	<section id='todo-list'>
	<input rv-on-keypress='app.add'>

	<ul>
	<li rv-each-todo='app:todos' rv-class-done='todo:done'>
	<input type='checkbox' rv-checked='todo:done' rv-on-change='app.setRemaining'>
	{ todo:summary }
	</li>
	</ul>

	<p>{ app:remaining } remaining</p>

	<section>
	<button rv-on-click='app.showAll'>Show All</button>
	<button rv-on-click='app.showActive'>Hide Completed</button>
	</section>
	</section>
	</body>
	</html>