Checklist KnockoutJS

by akrubic

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<button data-bind="click: AddItem">Add item</button>

<ul data-bind="foreach: Tasks">
  <li>
      <input type="checkbox" data-bind="checked: HasFinalized" />
      <span data-bind="template: {name: TaskTemplate, data: $data }"></span>
  </li>
</ul>

<script type="text/html" id="taskview-template">
  <span data-bind="text: Name"></span>
</script>
<script type="text/html" id="taskedit-template">
  <input type="text" data-bind="value: Name" />
</script>

CSS

ul {
    margin: 10px 20px;
}
ul > li {
        margin: 5px 0;
}

CoffeeScript

class @Task
  Name: ko.observable()
  Finalized: ko.observable()
  TaskTemplate: (item) -> if @Finalized then "taskview-template" else "taskedit-template"
  constructor: ->
    @HasFinalized = ko.computed
      read: () => !(@Finalized() is null or @Finalized() is undefined)
      write: (value) => 
        if value
          @Finalized new Date(Date.now())
         else
          @Finalized null
          
      owner: this
  
checkList = 
  Tasks: ko.observableArray([])
  AddItem: -> checkList.Tasks.push new Task()

ko.applyBindings checkList