javascript - Backbone subview calling render for parent -

i have backbone page behaves follows.

collection - > models -> views 

in have collection contains search results of n length. each of these models tied instance of view in case row of data being displayed.

i want able toggle each row 'details' view 'advanced' view contains more information. @ moment have parent view rendering n number of views each model. can toggled change in state updating model , listening change event , re-rendering part of view have clicked on. noticed problem whilst doing this. problem viewport jump top of page isn't great ux.

whilst debugging noticed strange

the parent view's (page holds search results) render function being called, in turn calling render function of each of rows. think what's causing each of child views re-render.

here code examples demonstrate problem:

// child view's render , 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 = 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 part of parent's render iterates on collection appending rows search tiles.

   (var = 0; < 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 can't work out why parent's render function being called causing other problems.

there 2 ways can happen, 1 if listening backbone events on collection second if it's dom event that's being triggered.

with backbone events, if @ documentation see events triggered on model in collection triggered on collection itself

any event triggered on model in collection triggered on collection directly, convenience. allows listen changes specific attributes in model in collection, example: documents.on("change:selected", ...)

that being case, should either check in events callback whether want act on (see triggered it, perhaps passing in extra flag when triggering event ), or make sure listening specific events interested in acting on. example instead of listening collections generic change event might want listen more specific version of (change:someproperty).

with dom events, can happen if listening same selector in parents view in child's view, since parent's root el parent child's el.