Knockout.js待办事项列表

我正试图创建一个简单的待办事项列表，大致遵循淘汰网站上的交互式教程

我可以将项目添加到列表中，但无法删除它。我做错了什么

function ToDo(stuff) {
    this.toDoItem = stuff;
}

function ToDoViewModel() {

    this.toDoItems = ko.observableArray([
        new ToDo("Watch Person of Interest"),
        new ToDo("Study for Midterm exam"),
        new ToDo("Buy groceries for Luis")
    ]);

    this.addToDoItem = function() {
        this.toDoItems.push(new ToDo($('.txt').val()));
        $('.txt').val('');
    }

    this.removeToDoItem = function(item) { 
        this.toDoItems.remove(item); 
    }
}

ko.applyBindings(new ToDoViewModel());

以下是“body”标记内的标记：

<table>
<tr>
    <td>ToDo List</td>
</tr>
<tbody data-bind="foreach: toDoItems">
    <tr>
        <td><label data-bind="text: toDoItem"></label></td>            
        <td><a href="#" data-bind="click: $root.removeToDoItem">Remove</a></td>
    </tr>    
</tbody>
</table>

<input class="txt"/>
<button data-bind="click: addToDoItem">Add Item</button>

待办事项清单
添加项

范围是您的问题。您应该看到的错误是：

TypeError:this.toDoItems未定义

（或类似的内容），这本质上意味着

此

不在

ToDoViewModel

范围内，而是在单击事件范围内，因此

此

是不同的对象引用（因此没有

removeToDoItem

方法）

但是，如果您存储了引用（就像许多使用

var self=this

的示例一样），那么您可以稍后引用

self.toDoItems

，并找到列表。基本上：

function ToDoViewModel(){
  var self = this; // add this line

  //...

  self.removeToDoItem = function(item){
    // now keep referencing `self`
    self.toDoItems.remove(item);
  }
}

您可能可以将

this.

的所有引用更改为

self.

（只要它引用的是ViewModel直接作用域内的对象）

可以找到更新的示例。

在“removeToDoItem”函数中，“this”并不表示您认为它的作用

解决方案是在ToDoViewModel中定义一个私有变量，并将其分配给该变量

function ToDoViewModel() {
var that=this;

然后在removeToDoItem中，您可以引用它

this.removeToDoItem = function(item) { 
    that.toDoItems.remove(item); 
}