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

如果你在小提琴中出现，你就无法定义＆＃34; page＆＃34;在范围内从组件的标签中获取原始字符串值（使用＆＃34; @＆＃34;作为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")会在第一次运行时设置绑定。实时绑定视图层正在计算这些功能＆＃34;引擎盖下＃34;并且这些计算（a）监听在函数内读取的属性的变化; （b）每次更改收听属性时更新DOM。使用视图模型将值存储在过滤器字段中，然后允许该函数在每次更改时再次触发。

Canjs改变了事件

1 个答案: