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

在fiddle中显示的情况下，您没有在作用域中定义"page"来从组件的标记中获取原始字符串值（使用"@"作为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。使用视图模型将值存储在过滤器字段中，然后允许该函数在每次更改时再次启动。