Canjs changed events

Question

canjs에서 목록 변경을 감지하고보기를 다시 그리는 방법이 있습니까? 목록을 변경하려고하지만 화면에 표시되지 않습니다. 순간
제가 보기 모델을 가지고

TodosListViewModel = can.Map.extend({ 
todoCreated: function(context, element) { 
    // new todo is created 
    var Todo = this.Todo; 
    new Todo({ 
    name: can.trim(element.val()) 
    }).save(); 
    element.val("");  
}, 
tagFiltered: function(context, element) { 
    // filter todos according to tag 
    this.todos = this.todos.filter(function(todo) { 
    return todo.tag === element.val(); 
    }); 
} 

});
그리고 구성 요소

can.Component.extend({ 
// todos-list component 
// lists todos 
tag: "todos-list", 
template: can.view("javascript_view/todos-list"), 
scope: function() { 
    // make the scope for this component 
    return new TodosListViewModel({ 
    todos: new TodoList({}), 
    Todo: Todo 
    }); 
}, 
events: { 
    "{scope.Todo} created": function(Todo, event, newTodo) { 
    // todo created 
    this.scope.attr("todos").push(newTodo); 
    }, 
    "{scope.todos} changed": function(a,b,c,d,e,f,g,h) { 
    console.log("todo change",d,e); 
    } 
} 

});
마크 업

<input type="text" name="tagFilter" placeholder="Tag lookup" can-enter="tagFiltered" /> 

당신이, 당신이에서 원시 문자열 값을 취할 범위에 "페이지"를 정의되지 않은 바이올린에 표시하고있는 경우 코드 http://git.io/vrPCTQ

Answer 1

의 나머지 구성 요소의 태그 (scope.page의 값으로 "@"사용). 여기에 라우터의 범위에 한 줄의 차이를 체크 아웃 :

http://jsfiddle.net/tkd9Lvtm/3/

편집 : 원래의 질문을 해결하지 않았다, 그래서 여기 당신이 시작할 수 있도록 할 수있는 여러 기능들을 설명합니다. 나는 당신을 위해 새로운 바이올린 버전을 만들었습니다.

http://jsfiddle.net/tkd9Lvtm/4/

당신이 원하는 것을 달성하기 CanJS 2.1 가장 좋은 방법은 뷰 모델에 속성 값을 귀하의 요소를 결합 양방향으로 양식 필드에 can-value 속성을 사용하는 것입니다. 태그 검색을위한 입력 필드가 대신 can-change을 사용하고 있음을 볼 수 있습니다. 이렇게하면 항목을 더 멀리 아래로 그리는 데에만 사용되는 필터 함수와 독립적입니다.

뷰 모델의 필터 함수 내에서 this.attr("filterTerm")을 호출하면 바인딩이 처음 실행될 때 CanJS는 속성이 변경 될 때 필터를 자동으로 다시 실행합니다. 라이브 바인딩 된 뷰 계층은 "내부"에서 이러한 함수를 계산하고 이러한 계산은 (a) 함수 내부에서 읽힌 속성의 변경 내용을 수신합니다. (b) 청취 된 속성에 대한 각각의 변경으로 DOM을 갱신한다. 뷰 모델을 사용하여 필터 필드에 값을 저장하면 각 변경시 해당 함수가 다시 실행됩니다.