Question

我正在尝试通过松散地遵循Knockout站点上的交互式教程来创建一个简单的ToDo列表。

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

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>

Answer 1

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

TypeError：this.toDoItems未定义

（或类似的东西）这实际上意味着this不在ToDoViewModel范围内但在click事件范围内，因此this是不同的对象引用（因此没有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的直接范围内引用对象）。

可以找到更新的示例here。

Answer 2

在＆＃34; removeToDoItem＆＃34;功能＆＃34;这＆＃34;并不意味着你的想法。

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

function ToDoViewModel() {
var that=this;

然后在removeToDoItem里面你可以引用它。

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

Knockout.js待办事项列表

2 个答案: