2

我正在尝试通过松散地遵循 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>
4

2 回答 2

4

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

类型错误：this.toDoItems 未定义

（或类似的东西）这本质上意味着它this不在范围内，ToDoViewModel而是在点击事件范围内，因此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.to的所有引用self.（只要它引用 ViewModel 直接范围内的对象）。

可以在此处找到更新的示例。

于 2012-10-14T00:47:46.623 回答
1

在“removeToDoItem”函数中，“this”并不意味着你认为它做了什么。

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

function ToDoViewModel() {
var that=this;

然后在 removeToDoItem 你可以参考它。

this.removeToDoItem = function(item) { 
    that.toDoItems.remove(item); 
}
于 2012-10-14T01:21:25.877 回答