Skip to content

Instantly share code, notes, and snippets.

@sudsy sudsy/application.css forked from mikeric/application.css
Last active Aug 29, 2015

Embed
What would you like to do?
.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
You can’t perform that action at this time.