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

スコープはあなたの問題です。表示されるエラーは次のとおりです。

TypeError: 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」関数では、「これ」は、あなたが考えていることを意味するものではありません。

解決策は、ToDoViewModel 内でプライベート変数を定義し、これに割り当てることです。

function ToDoViewModel() {
var that=this;

その後、 removeToDoItem 内で参照できます。

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