Canjs改变了事件

-1

有没有办法检测canjs中的列表更改并使视图重绘？我正在更改列表，但这不会显示在屏幕上。
目前我有视图模型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

来源

2014-10-07 php--

你能更好地格式化你的代码吗？ CanJS具有实时绑定功能，并会自动更改。你可以创建一个小提琴，演示类似于我为另一个问题创建小提琴的问题吗？ – 2014-10-08 03:04:56

http://jsfiddle.net/tkd9Lvtm/2/我使用tagFiltered来过滤列表。它过滤todos，但不显示在屏幕上。 – 2014-10-08 10:37:07

其余的在你展示的小提琴，你有没有在范围界定“页”，采取从原始字符串值的情况下组件的标签（使用“@”作为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。使用视图模型将值存储在过滤器字段中，然后允许该功能在每次更改时再次触发。

来源

2014-10-08 18:45:33

谢谢。我仍然需要根据标签过滤列表。 – 2014-10-08 19:44:16

更新了我的答案，回答了原始问题。对不起，最初由于它没有渲染而被分散注意力。 :) – 2014-10-08 21:14:14

Canjs改变了事件

回答

相关问题