Knockout.js 할 일 목록

Question

녹아웃 사이트의 대화식 자습서를 느슨하게 따라 간단한 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()); 

은 '몸'태그 안에 마크 업입니다 :

<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

범위가 문제입니다.

이

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

당신은 아마 self.에 this.의 모든 참조를 변경할 수 있습니다.

업데이트 된 예제는 here입니다.

Answer 2

"removeToDoItem"함수에서 "this"는 사용자가 생각하는 바를 의미하지 않습니다.

해결책은 ToDoViewModel 내부에 개인 변수를 정의하고이를 할당하는 것입니다.

function ToDoViewModel() { 
var that=this; 

내부에서 removeToDoItem을 참조하면됩니다.

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