lanan
lanan

Reputation: 2752

Backbone.js Binding to collection "add" renders view twice

I am trying to trace all of the zombies in my application and get better understanding of how the event binding happens. I have a view that binds its collection "add" event to its render function.

_.bindAll(this, "render");
this.collection.bind("add", this.render);

So if I log something in my render function I can see in console that rendering happened twice right after user adds new model through UI. The console output looks like this:

rendering                                  index.js?body=1 (line 88)

POST http://localhost:3000/tasks           jquery.js?body=1 (line 8103)

rendering                                  index.js?body=1 (line 88)

I wonder why is this happening. I know for a fact that model was added only once to the collection so that makes me think that event should only be fired once. Then I don't understand why render was executed twice. I have looked in similar question here but it is different because I am using add event instead of change.

Upvotes: 1

Views: 1711

Answers (3)

lanan
lanan

Reputation: 2752

It turned out that there was an additional binding to render through Event Aggregator. It was added by another developer.

Upvotes: 0

Daniel Aranda
Daniel Aranda

Reputation: 6552

I think that you are calling render two times.

Yoy are doing something like this:

var yourView = new YourDefinedView();
yourView.render(); // this is your manual call to render

//here you call to the server and when data arrives is the second render
this.collection.fetch();

I do not think that render is the best method to bind when a collection receives a new item.

Check this example how we bind a specific event for add items from the Collection to the View: http://danielarandaochoa.com/backboneexamples/blog/2012/02/22/real-world-usage-of-a-backbone-collection/

Upvotes: 1

Paul
Paul

Reputation: 18597

Did you instantiate your view twice? It might be 2 different views.

Upvotes: 1

Related Questions