Backbone render with collection - backbone.js

Question

I'm starting to study Backbone with requirejs
I follow some tutorial online and now I have a little doubt.
When I fetch data from a Json print me into the console log too much line, if into my json there is 4 element, it print me 4*4 element.
This is my code:
Collection:
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"
}
]
}
Output into the console:
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
Why there is so much lines?
I expected an output like this:
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
I don't understand the point. Can someone explain what am I wrong?
Thanks

Answer 1

Your problem is here:
this.todos.bind('all',this.render, this);
You are binding to all events which in turn calls this.render several times.
Try this instead:
this.todos.bind('sync', this.render, this);
or, better yet:
this.todos.on('sync', this.render, this);