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>