Backbone使用集合渲染
Backbone使用集合渲染
提问于 2013-06-25 21:34:41
我已经开始学习用requirejs学习Backbone了
我在网上看了一些教程，现在我有点怀疑了。
当我从Json获取数据时，将我打印到控制台日志中太多行，如果我的json中有4个元素，它将打印4*4个元素。
这是我的代码：
集合：
define(['backbone', 'models/todo'], function(Backbone, TodoModel){
var todoCollection = Backbone.Collection.extend({
model: TodoModel,
url:'json/todos.json',
parse: function(data){
return data.result;
}
});
return todoCollection;
});应用程序：
define(['jquery' , 'backbone', 'views/todo', 'models/todo', 'collections/todo'],
function($, Backbone, TodoView, TodoModel, TodoCollection){
var AppView = Backbone.View.extend({
el:$('#placeholder'),
initialize: function(){
console.log('initialize AppView');
this.todos = new TodoCollection();
this.todos.bind('all',this.render, this);
this.todos.fetch();
},
render: function(){
console.log('Data is fetched');
this.todos.each(function(model){
console.log(model.get("content"));
});
}
})
return AppView;
});Json：
{
"result":[
{
"content" : "Todo1"
},
{
"content" : "Todo2"
},
{
"content" : "Todo3"
},
{
"content" : "Todo4"
}
]
}控制台输出：
initialize AppView app.js:8
Data is fetched app.js:14
4
Initialized Todo model todo.js:7
Data is fetched app.js:14
Todo1 app.js:16
Todo2 app.js:16
Todo3 app.js:16
Todo4 app.js:16
Data is fetched app.js:14
Todo1 app.js:16
Todo2 app.js:16
Todo3 app.js:16
Todo4 app.js:16
Data is fetched app.js:14
Todo1 app.js:16
Todo2 app.js:16
Todo3 app.js:16
Todo4 app.js:16
Data is fetched app.js:14
Todo1 app.js:16
Todo2 app.js:16
Todo3 app.js:16
Todo4 app.js:16
Data is fetched app.js:14
Todo1 app.js:16
Todo2 app.js:16
Todo3 app.js:16
Todo4 app.js:16为什么有这么多行？我期望得到这样的输出：
initialize AppView app.js:8
Data is fetched app.js:14
4
Initialized Todo model todo.js:7
Data is fetched app.js:14
Todo1 app.js:16
Todo2 app.js:16
Todo3 app.js:16
Todo4 app.js:16我不明白这一点。有没有人能解释一下我说错了什么？谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-06-25 21:52:11
你的问题在这里：
this.todos.bind('all',this.render, this);您将绑定到所有事件，而这些事件又会多次调用this.render。
试着这样做：
this.todos.bind('sync', this.render, this);或者，更好的是：
this.todos.on('sync', this.render, this);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17307978
复制相关文章
![linux ldd命令源代码,Linux中ldd命令的用法详解[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/629da835500ca7356f8ea1318f382b90.jpeg)
相似问题
从加载器跳转到ELF的入口点
ELF入口点是否与通常的0x80*？为什么要这么做？
更改入口点“主”
入口点地址与原入口点有什么不同？
链接器(%ld) ELF问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
