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待辦事項列表

回答

相關問題