Rivets.js todo list demo
| .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> |
This comment has been minimized.
This comment has been minimized.
|
change the line 21 to |
This comment has been minimized.
This comment has been minimized.
|
Just a heads up that http://rivetsjs.com/dist/rivets.min.js is 404ing. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
This is broken on line 21 for some reason :(