Knockout.js ToDo List

Question

Я пытаюсь создать простой список ToDo, свободно следуя интерактивному руководству на сайте Knockout.

Я могу добавить товар в список, но я не могу его удалить. Что я делаю не так ??

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> 

Answer 1

Scope ваша проблема. Ошибка, которую вы должны увидеть это:

TypeError: this.toDoItems is undefined

(или нечто подобное), который по существу означает, что this не в ToDoViewModel объеме, но в пределах событий щелчка так this это другая ссылка на объект (и для этого Безразлично» t имеют метод 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

В функции «removeToDoItem» «это» не означает, что вы думаете.

Решение состоит в том, чтобы определить частную переменную внутри ToDoViewModel и назначить ее этому.

function ToDoViewModel() { 
var that=this; 

затем внутри removeToDoItem вы можете обратиться к нему.

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