<
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
type
="text/javascript">
//Model
function
Task(data) {
this
.title = ko.observable(data.title);
this
.isDone = ko.observable(data.isDone);
}
//ViewModel
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
>