Canjs изменил событие

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-value вместо can-change - это делает его независимым от функции фильтра, которая используется только для рисования элементов дальше вниз.

CanJS автоматически перезапустит фильтр при изменении атрибута, потому что вызов this.attr("filterTerm") функция фильтра внутри модели представления устанавливает привязку при первом запуске. Слой живого связанного представления выполняет вычисления из этих функций "под капотом", и эти вычисления (a) прослушивают изменения атрибутов, которые считываются внутри функции; и (b) обновляет DOM с каждым изменением прослушиваемых атрибутов. Использование модели представления для сохранения значения в поле фильтра позволяет этой функции снова запускаться при каждом изменении.