KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
I have this knockout code: 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()); This html: <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="knockout-2.0.0.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <h3>Tasks</h3> <form data-bind="submit: addTask"> Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" /> <button type="submit">Add</button> </form> <ul data-bind="foreach: tasks, visible: tasks().length > 0"> <li> <input type="checkbox" data-bind="checked: isDone" /> <input 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> </body> The example is the same as the one found on the Knockout website, b
Tags (comma-separated)
Save Edits
Cancel