骨干与收集

Question

使我开始学习与requirejs

我遵循一些在线教程，现在我有一点疑问骨干。
当我从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 

我不明白这一点。有人可以解释我错了什么吗？ 感谢

Answer 1

你的问题是在这里：

this.todos.bind('all',this.render, this); 

您绑定到这反过来又要求this.render几次的所有事件。

试试这个：

this.todos.bind('sync', this.render, this); 

，或者更好的：

this.todos.on('sync', this.render, this);