BackboneJS Collection Adds Event Fired in Multiple Collections

Question

I am having a problem when I add to a collection, CollectionA , where CollectionA and CollectionB listen to the add event. However, the add event is fired for both collections when added to CollectionA . CollectionA and CollectionB are base collections that extend Backbone.Collection and set only URLs.

Species definitions

 ModelViewA = Backbone.View.extend({ ... render : function() { var self = this; var attributes = this.model.toJSON(); this.$el.html(this.template(attributes)); var collectionB = new CollectionB(); var collectionViewB = new CollectionViewB(); collectionB.fetch({ self.$el.append(collectionViewB.render().el); }); return this; }, ... }); CollectionViewA = Backbone.View.extend({ initialize : function() { this.collection.on('add', this.renderOne, this); }, ... render : function() { this.collection.forEach(this.renderOne, this); return this; }, renderOne : function(model) { console.log('Added to Collection A'); var view = new ViewA({ model : model }); this.$el.append(view.render().el); return this; } }); CollectionViewB = Backbone.View.extend({ initialize : function() { this.collection.on('add', this.renderOne, this); }, ... render : function() { this.collection.forEach(this.renderOne, this); return this; }, renderOne : function(model) { console.log('Added to Collection B'); var view = new ViewB({ model : model }); this.$el.append(view.render().el); return this; } }); 

This is how I start with a cascade of these events ...

 var collectionA = new CollectionA(); var modelViewA = new ModelViewA({ model : collectionA.at('some id'); }); $('body').append(modelViewA.render().el); $('body').empty(); var collectionViewA = new CollectionViewA({ collection: collectionA }); $('body').append(collectionViewA.render().el); collectionViewA.add([{...}]); 

This code will output the original view correctly using modelView. Then it will display collectionViewA correctly, however, when I fire the add event, it will try to add to CollectionA and CollectionB so that the console displays the following for every time the add event is fired

 Added to Collection B Added to Collection A 

It will also try to display Collection B , but will throw an error because the template is not set.

Let me know if this is too confusing, and I can try to output this description a little more.

THANKS!

Answer 1

Why do you create a CollectionB instance that retrieves in the ModelViewA rendering method?

  var collectionB = new CollectionB(); var collectionViewB = new CollectionViewB(); collectionB.fetch({ self.$el.append(collectionViewB.render().el); }); 

It does not even analyze. Are you sure you did not accidentally edit the anonymous success function? First, let me assume that not exactly what your code shows. That is, it should be something like:

  collectionB.fetch({ success: function(){ self.$el.append(collectionViewB.render().el); } }); 

?

Let go of it.

Therefore, when ModelViewA displayed, it is obvious that CollectionB is going to retrieve something, and then collectionViewB will be displayed, because that is what you told it to. Now can you do ModelViewA s?

 CollectionViewA = Backbone.View.extend({ initialize : function() { this.collection.on('add', this.renderOne, this); }, ... 

 renderOne : function(model) { console.log('Added to Collection A'); var view = new ViewA({ model : model }); this.$el.append(view.render().el); return this; } 

What is this ViewA ? Could this also apply to ModelViewA ?

If so, we can guess what happens:

Your CollectionViewA instance displays a ModelViewA instance for each addition. Each instance rendering of a ModelViewA creates an instance of CollectionB instance ( CollectionB ) and collectionViewB ( collectionViewB ), and fetching CollectionB has a successful method that displays collectionViewB . If CollectionB has any models, for each model it is successfully registered on the “Added to Collection B” console before attempting to visualize instances of ViewB that, if I understand you correctly, fail (which is probably why you only have one ", Added Post Collection B ".

Now about why console logs are in the reverse order ... I'm still trying to figure it out. Maybe I missed something.

In any case ... This situation is not perfect. I'm not sure what I could say to improve your code. Calling fetch from render seems to me like you are specifying a lot of what needs to be done in the rendering code. I'm not even sure that you knew that fetch should have started.