Question

我正在制作一个简单易用的列表应用来学习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>

Answer 1

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

self.remove = function(item) {
    self.toDoItems.remove(item);
};

Answer 2

您正在调用.destroy，它实际上并未从数组中删除该项;它只向对象添加属性。这旨在为Rails开发人员提供noted in the documentation的便利。

如果您更改代码以致电.remove，则该项目将从阵列中移除。

Here is a jsFiddle as an example

ko.computed in KnockoutJS做列表应用程序

2 个答案: