Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
112 lines (94 sloc) 3.25 KB
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/knockout-2.0.0.js"></script>
</head>
<body>
<div id="todoapp">
<div class="title">
<h1>Todo</h1>
</div>
<form data-bind="submit: addTask" id="create-todo">
<input class="new-todo" data-bind="value: newTaskText" placeholder="What needs to be done?" />
</form>
<div class="todos">
<ul data-bind="foreach: tasks, visible: tasks().length > 0" id="todo-list">
<li>
<div class="todo" data-bind="css: { editing: isEditing }, event: { dblclick: startEdit }">
<div class="display" data-bind="css: { done: isDone }">
<input type="checkbox" class="check" data-bind="checked: isDone" />
<div class="todo-text" data-bind="text: title"></div>
<a href="#" class="todo-destroy" data-bind="click: $parent.removeTask">&times;</a>
</div>
<div class="edit">
<form data-bind="submit: updateTask">
<input data-bind="value: title" />
</form>
</div>
</div>
</li>
</ul>
</div>
You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s)
<span data-bind="visible: incompleteTasks().length == 0"> - its beer time!</span>
<a data-bind="visible: completeTasks().length > 0, click: removeCompleted " href="#" id="clear-completed">Clear Completed Tasks</a>
</div>
<div id="credits">
<p>Dbl-click to edit tasks.</p>
</div>
<script>
/* data goes here */
var data = [
{id: 1, title: "Drink beer", isDone: false},
{id: 2, title: "Eat food", isDone: false},
{id: 3, title: "Snowboard", isDone: false}
];
function Task(data) {
this.title = ko.observable(data.title);
this.isDone = ko.observable(data.isDone);
this.isEditing = ko.observable(data.isEditing);
this.startEdit = function (event) {
console.log("editing");
this.isEditing(true);
}
this.updateTask = function (task) {
this.isEditing(false);
}
}
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() && !task._destroy;
});
});
self.completeTasks = ko.computed(function(){
return ko.utils.arrayFilter(self.tasks(),
function(task) {
return task.isDone() && !task._destroy;
});
});
// Operations
self.addTask = function() {
self.tasks.push(new Task({ title: this.newTaskText(), isEditing: false }));
self.newTaskText("");
};
self.removeTask = function(task) { self.tasks.destroy(task) };
self.removeCompleted = function(){
self.tasks.destroyAll(self.completeTasks());
};
/* Load the data */
var mappedTasks = $.map(data, function(item){
return new Task(item);
});
self.tasks(mappedTasks);
}
ko.applyBindings(new TaskListViewModel());
</script>
</body>
</html>