Backbone визуализации с коллекцией

Question

Я начинаю изучать Backbone с 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; 
}); 

App:

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