javascript - Backbone DOM events firing multiple times -

hi guys i'm building backbone app first time - , going great!

however, don't think creating views collection of models in correct way , when bind events fire every view when want them fire one.

here backbone code (a snippet):

        (function(){          series = backbone.model.extend({             defaults:{                 active:false             }         });          seriesgriditemview = backbone.view.extend({             el:'#model-grid',             defaults: {                 active : false             },             initialize: function(){                 this.render();                 this.listento(this.model, 'change', this.setstate);             },             render: function(){                 this.template = _.template( $('#template-model-grid-item-view').html() );                 this.view = $(this.template(this.model.tojson())).appendto(this.$el);             },             setstate: function(){                 this.active = this.model.get('active');                 this.view.toggleclass('active',this.active);             },             events: {                 'click':'toggle'             },             toggle: function(e){                 e.stoppropagation();                 e.preventdefault();                 console.log('clicked');                 return false;             }          });          seriescollection = backbone.collection.extend({             model: series,             setprice : function(p){                 this.foreach(function(m){                     var active = 0;                     _.each(m.get('vehicles'),function(v){                         if(v.price <=p){                             v.active = true;                             active++;                         }                         else{                             v.active = false;                         }                     });                     m.set('active',active>0);                 });             }         });          series = new seriescollection(window.bmw.data.series);         series.foreach(function(m,i){             var c = i+1;             if(c > 3){                 c%=3;             }             m.set('column','1');             new seriesgriditemview({model:m});         });     })(); 

and here json constructs models:

window.bmw.data.series = [     {         seriesid:1,         name:'1 series',         slug:'1-series',         order:0,         vehicles:[             {                 seriesid:1,                 price:200             },             {                 seriesid:2,                 price:300             }         ]     },     {         seriesid:2,         name:'3 series',         slug:'3-series',         order:1,         vehicles:[             {                 seriesid:1,                 price:400             },             {                 seriesid:2,                 price:500             }         ]     },     {         seriesid:3,         name:'4 series',         slug:'4-series',         order:3,         vehicles:[             {                 seriesid:1,                 price:100             },             {                 seriesid:2,                 price:300             }         ]     },     {         seriesid:4,         name:'6 series',         slug:'6-series',         order:4,         vehicles:[             {                 seriesid:1,                 price:100             },             {                 seriesid:2,                 price:300             }         ]     },     {         seriesid:6,         name:'x3',         slug:'x3',         order:5,         vehicles:[             {                 seriesid:1,                 price:500             },             {                 seriesid:2,                 price:800             }         ]     } ]; 

and here template views

<script type="text/template" id="template-model-grid-item-view">     <div id="series-<%=seriesid%>" class="grid-item-view column-<%=column%>">         <div class="label"><%= name %></div>         <div class="thumbnail">             <img src="/content/themes/bmw/img/series/small/<%= slug %>.png"/>         </div>     </div> </script> 

the problem - views assemble correctly when click 1 view event fires on of views! can please point me in right direction?

thanks,

jack

since omitted selector in events object of views following applies

per backbone documentation: omitting selector causes event bound view's root element (this.el).

the problem each of seriesgriditemview's bind click events #model-grid , each view child of #model-grid. in example, register 5 click events , when click on of views, 5 events triggered.

without changing of other code, 1 solution setup events object return function can specify id selector each of views.

events: function() {   var selector = '#series-' + this.model.get('seriesid'); // id corresponds template id   var ev = {};   ev['click ' + selector] = 'toggle';   return ev; }, 

another option , 1 prefer, not specify #model-grid root element views. end looking like: demo

seriesgriditemview = backbone.view.extend({   // remove following line   el:'#model-grid',     // .. else same ../ });  series = new seriescollection(window.bmw.data.series);   series.foreach(function(m,i){     var c = i+1;     if(c > 3){       c%=3;     }     m.set('column','1');     $('#model-grid').append(new seriesgriditemview({model:m}).el); }); 

a side suggetion

1. in render function, there's no need create variable, can access element using $:

   render: function(){   this.template = _.template( $('#template-model-grid-item-view').html() );   this.$el.append(this.template(this.model.tojson()))); }, setstate: function(){   this.active = this.model.get('active');   this.$el.toggleclass('active',this.active); },