.done { | |
opacity: 0.5; | |
text-decoration: line-through; | |
} |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment