0

我正在制作一个简单的列表应用程序来学习 KnockoutJS。现在我可以添加一个任务，当我单击“删除”链接时，该任务将从视图中删除。我在底部有一些使用 ko.computed 函数的任务。当我添加任务时它会更新，但是当我删除任务时，数字保持不变。有谁知道下面的代码有什么问题？

这是我的 JS：

$(function() {
var Todo = function (task, complete) {
    this.task = task;
    this.complete = complete;
}

var AppViewModel = function(todos) {
    var self = this;

    //Create an observable array of Todo objects
    self.toDoItems = ko.observableArray([
        { task: "Learn KnockoutJS", complete: false}
    ]);



    //Add a new todo
    self.add = function() {
        self.toDoItems.push(new Todo($('.txt').val()));
        $('.txt').val('');
    };

    //Remove a todo
    self.remove = function(item) {
        self.toDoItems.destroy(item);
    }

    //Mark a todo complete
    self.complete = function (item) {
        item.complete = true;
    }


    //Count active tasks
    self.remainingTasks = ko.computed(function() {
        return self.toDoItems().length;
    })
}

ko.applyBindings(new AppViewModel());

});

这是我的观点：

<h3>Tasks</h3>

<table>
<tbody data-bind="foreach: toDoItems">
    <tr>
      <td><input type="checkbox" data-bind="click: $root.complete"></td>
      <td class="todo-item"><label data-bind="text: task"></label></td>
      <td class="remove"><a href="#" data-bind="click: $root.remove">Remove</a></td>
    </tr>
 </tbody>
 </table>
 <br>
 <input class="txt" />
 <button data-bind="click: add">Add</button><br><br>
 There are <strong data-bind="text: remainingTasks"></strong> tasks here.<br>
4

2 回答 2

2

淘汰可观察数组实现了两种删除项目remove()的方法： ，它实际上从数组中删除项目，以及destroy()，它只是将项目标记为“已销毁”，但将其保留在列表中。所以可能remove()是你想要的，而不是destroy()：

self.remove = function(item) {
    self.toDoItems.remove(item);
};
于 2013-06-17T21:22:48.090 回答
1

您正在调用.destroywhich 实际上并没有从数组中删除该项目；它只向对象添加一个属性。如文档中所述，这是为了方便 Rails 开发人员。

如果您将代码更改为调用，.remove则该项目将从数组中删除。

这里以 jsFiddle 为例。

于 2013-06-17T21:21:53.203 回答