Knockout.js待办事项列表

我试图通过松散地按照Knockout站点上的交互式教程创建一个简单的待办事项列表。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());

这里是一个标记 '身体' 标签中：

<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>

来源

2012-10-14 nv.snow

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

TypeError: this.toDoItems is undefined

（或类似的东西），这实际上是说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.（只要它引用视图模型的直接范围内的对象）。

更新示例可以找到here。

来源

2012-10-14 00:47:46

在“removeToDoItem”函数中，“this”不代表你认为它的作用。

解决的办法是在ToDoViewModel中定义一个私有变量并将其赋值给它。

function ToDoViewModel() { 
var that=this;

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

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

来源

2012-10-14 01:21:25 maddoxej

Knockout.js待办事项列表

回答

相关问题