&nbsp;

&nbsp;
<h3>Loading and saving data</h3>
<form data-bind="submit: addTask">Add task: <input type="text" placeholder="What needs to be done?" data-bind="value: newTaskText" />
<button type="submit">Add</button></form>
<ul data-bind="foreach: tasks, visible: tasks().length &gt; 0">
 	<li><input type="checkbox" data-bind="checked: isDone" />
<input type="text" data-bind="value: title, disable: isDone" />
<a href="#" data-bind="click: $parent.removeTask">Delete</a></li>
</ul>
You have <b data-bind="text: incompleteTasks().length"> </b> incomplete task(s)
<span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>

<script src="js/knockout-3.0.0.js"></script>

<script>
  function Task(data)
  {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);
  }

  function TaskListViewModel()
  {
    // Data
    var self = this;
    self.tasks = ko.observableArray([]);
    self.newTaskText = ko.observable();
    self.incompleteTasks = ko.computed(function()
    {
      return ko.utils.arrayFilter(self.tasks(), function(task)
      {
        return !task.isDone()
      });
    });

    
    // Operations
    self.addTask = function()
    {
      self.tasks.push(new Task(
      {
        title: this.newTaskText()
      }));
      self.newTaskText("");
    };
    self.removeTask = function(task)
    {
      self.tasks.remove(task)
    };
  }

  ko.applyBindings(new TaskListViewModel());
  </script>

&nbsp;