Skip to content

Instantly share code, notes, and snippets.

@arekt
Created February 25, 2013 01:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arekt/5026689 to your computer and use it in GitHub Desktop.
Save arekt/5026689 to your computer and use it in GitHub Desktop.
Example from Codeschool knockout, with small changes rewritten in coffee and haml.
.container
%h1 Todo List
%ul.todos(data-bind="foreach: todos")
%li(data-bind="attr: {class: className}")
%input(type="checkbox" data-bind="checked: completed")
%span(data-bind="text: title")
%a(data-bind="visible: allowClear, click: clearList") Clear List
%input(type="text" placeholder="New Todo Title" data-bind="value: todoToAdd, event: {change: addTodo}")
:javascript
var todos = [ new Todo("Buy arduino"), new Todo("Eat lunch") ]
dTodos = new Todos(todos)
ko.applyBindings(dTodos);
class Todo
constructor: (@title) ->
@completed = ko.observable(false)
@className = ko.computed ->
if @completed()
'completed'
else
null
, @
class Todos
constructor: (todos=[])->
@todos = ko.observableArray(todos);
@todoToAdd = ko.observable('');
@addTodo = ->
@todos.push new Todo(@todoToAdd());
@todoToAdd('');
allowClear: =>
ko.computed ->
if @todos().length
return @todos().every (todo) ->
return todo.completed();
, @
clearList: ->
@todos([]);
window.Todo = Todo
window.Todos = Todos
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment