Rivets.js todo list example

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

by hgoz

HTML

<script src="//underscorejs.org/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/stapes/0.8.1/stapes.min.js"></script>
<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='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>

CSS

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

JavaScript

/*rivets.adapters[':'] = {
  observe: function(obj, keypath, callback) {
    obj.on("change:" + keypath, callback)
  },
 
  unobserve: function(obj, keypath, callback) {
    obj.off("change:" + keypath, callback)
  },
 
  get: function(obj, keypath) {
    return obj.get(keypath)
  },
 
  set: function(obj, keypath, value) {
    obj.set(keypath, value)
  }
}


var Todos = Stapes.subclass({
  all: function() {
    return this.getAllAsArray()
  },
 
  active: function() {
    return _.select(this.all(), function(todo) {
      debugger;
      return !todo.get('done')
    })
  }
})
*/

var Todo = {};
 
var ViewModel = {
	this.remaining = 0;
  
	init: function() {
  this.setTodos();
//    this.todos.on('change', )
//    this.todos.on('change', this.setRemaining)
    this.showAll()
    this.setRemaining()
  },
 
  setTodos: function() {
		todos = [];//', this.todos[this.get('filter')]())
  },
 
  showAll: function() {
    this.set('filter', 'all')
    this.setTodos()
  },
 
  showActive: function() {
    todos = todos.filter(function(todo){
    	return todo.active:
    });
  },
 
  setRemaining: function() {
    remaining = return this.todos.filter(function(todo){
    	return todo.active;
    }).length;
  },
 
  add: function(ev) {
    if(ev.keyCode === 13) {
      todo = new Todo()
      todo.summary = ev.currentTarget.value;
      ev.currentTarget.value = ''
      this.todos.push(todo);
      this.setRemaining();
    }
  }
}
 
$(document).ready(function() {
  app = new ViewModel()
  app.init()
  rivets.bind($('#todo-list'), {app: app})
})