骨幹與收集

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);