Knockout.js ToDo List

Question

J'essaie de créer une liste de tâches simple en suivant le tutoriel interactif sur le site Knockout.

Je peux ajouter un élément à une liste, mais je ne peux pas le supprimer. Qu'est-ce que je fais mal ??

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()); 

Voici le balisage dans une balise 'corps':

<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 est votre problème. L'erreur que vous devriez voir est:

TypeError: this.toDoItems is undefined

(ou quelque chose de similaire) Ce qui signifie essentiellement que this est pas dans le champ ToDoViewModel mais dans le cadre d'événement click si this est une référence d'objet différent (et celui-ci n » t avoir une méthode removeToDoItem).

Toutefois, si vous stockez la référence (comme de nombreux exemples utilisant var self = this), vous pouvez ensuite référencer self.toDoItems plus tard et la liste sera localisée. En gros:

function ToDoViewModel(){ 
    var self = this; // add this line 

    //... 

    self.removeToDoItem = function(item){ 
    // now keep referencing `self` 
    self.toDoItems.remove(item); 
    } 
} 

Vous pouvez probablement changer toute référence de this.-self. (aussi longtemps qu'il est référence à des objets dans la portée directe du ViewModel).

L'exemple mis à jour peut être trouvé here.

Answer 2

Dans la fonction "removeToDoItem", "this" ne signifie pas ce que vous pensez.

La solution consiste à définir une variable privée dans le ToDoViewModel et à l'affecter à cela.

function ToDoViewModel() { 
var that=this; 

puis à l'intérieur de removeToDoItem vous pouvez vous y référer.

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