Backbone subview calls render to parent
I have a basic page that behaves like this.
Collection - > Models -> Views
In that I have a collection that contains search results in N length. Each of these models is bound to a view instance, which in this case is a string of displayed data.
I want to be able to switch each line from my "detail" view to their "expanded" view, which contains more information. At the moment I have a parent view displaying N number of views for each model. I can toggle the state change by updating the model and listening to the change event, and then reworking part of the view I'm viewing. I noticed a problem during this. The problem is that there is little UX going up the screen to the top of the page.
While debugging this, I noticed something strange
The parent view (the page containing the search results) is called, the render function, which in turn calls the render function for each of the rows. I think this is what causes each child view to re-render.
Here are some code examples to demonstrate the problem:
// The child view render and initialis
var SearchInviteRow = Backbone.View.extend({
tagName: "invite-section-result-row",
initialize: function(params){
this.template = templateHTML;
this.extendedTemplate = extendedTemplate;
this.listenTo(this.model, 'change', this.render);
},
events : {
"click .toggle-attachments" : "renderWithAttachments"
},
render: function(){
var view = this, render;
var that = this;
if(!this.model.get("expand")){
var rendered = Mustache.render(view.template, that.model.toJSON());
this.$el.html(rendered);
} else {
var rendered = Mustache.render(view.extendedTemplate, that.model.toJSON());
this.$el.html(rendered);
}
return this;
},
close: function(){
this.remove();
},
renderWithAttachments: function(){
if( !this.model.get("expand") ) {
this.model.set( {"expand" : true } );
this.model.getAttachments();
} else {
this.model.set( {"expand" : false } );
}
}
});
This is part of the parent rendering that iterates through the collection, adding strings to the search chunks.
for (var i = 0; i < this.collection.length; i++) {
view.subViewArray[i] = new SearchInviteRow({
model: this.collection.at(i)
});
this.$(".invite-section-inside").append(view.subViewArray[i].render().el);
}
What I can't seem to work is why the parent inference function is called causing other problems.
source to share
There are two ways this can happen if you are listening to the main events in your collection, the second is if it is a DOM event that is being fired.
With main events, if you look at the documentation , you can see that events fired on the model in the collection will also be fired on the collection itself
Any event that fires on a model in the collection will also fire directly in the collection, for convenience. This allows you to listen for changes to certain attributes in any model in the collection, for example: documents.on ("change: selected", ...)
In this case, you either need to check the event callback, whether you want to act on it (see what caused it, perhaps by passing an additional flag when the event is fired), or make sure you only listen to the events that you are interested in the action ... For example, instead of listening to a collection of generic change
events, you can listen to a more specific version ( change:someProperty
).
On events, DOM
this can happen if you are listening to the same selector in your parent view as in your child view, since the parent root is el
also the parent of the child el
.
source to share