javascript - Strange behavior with "this" in Backbone.js when binding to "add"/"remove" in a collection -

i have following 2 views based on backbone.js

pg.views.itemlist = backbone.view.extend({    tagname:  "div",   classname: "items",    initialize: function() {     _.bindall(this, 'addone', 'addselected')      items.bind('add',     this.addone);      items.fetch();   },    // removed    addone: function(item) {     console.log($(this.el));     var view = new pg.views.item({model: item});     $(this.el).append(view.render().el);   },    addselected: function(itemlist) {     _.each(itemlist, this.addone);     return this.el;   },    // removed  });  pg.views.section = backbone.view.extend({    tagname:  "section",    sectiontemplate: _.template($('#section-template').html()),    events: {     // removed   },    initialize: function() {     _.bindall(this, 'render', 'close', 'additemtosection', 'removeitemfromsection');     this.model.bind('change', this.render);     this.model.view = this;      items = new pg.collections.itemlist;   },    render: function() {     $(this.el).html(this.sectiontemplate(this.model.tojson()));     this.setcontent();     items.bind('add', this.additemtosection);                   // "add" event bind     items.bind('remove', this.removeitemfromsection);           // "remove" event bind     this.additems();     return this;   },    additems: function() {     var ids = this.model.get('items');     var view = new pg.views.itemlist;     var items = _.map(ids, function(id){ return items.get(id); });     $(this.el).append(view.addselected(items));   },    // functions removed    setcontent: function() {     var title = this.model.get('title');     this.$('.title').text(title);     this.title = this.$('.title-input');     this.title.val(title);   },    additemtosection: function(item) {     console.log(this.model.get('title'));     // removed   },    removeitemfromsection: function(item) {     console.log(this.model.get('title'));     // removed   }  }); 

here problem encountering.

i have view user creates 2 sections, lets called "section1" , "section2". these names used in "title" attribute.

here strange behavior observing:

1. when user in "section1" , adds , item, "add" bind event triggered, results in "section2" being written console.

2. when user in "section1" , adds , item, "remove" bind event triggered, results in "section1" being written console.

3. when user in "section2" , adds , item, "add" bind event triggered, results in "section2" being written console.

4. when user in "section2" , adds , item, "remove" bind event triggered, results in "section2" , "section1" being written console.

if binding "add" inside "pg.views.section" view using "this.additemtosection", shouldn't call "additemtosection" block inside instance?

the line can see "redefining" "this" "add" bind in initialize block of "pg.views.itemlist". if line culprit, how prevent redefining "this" on "add" bind "section1"?

i think global problem, pun intended ;) calling on items firstly has been declared var - (bad practice) implies it'll bound window object. , use same variable reference in view! both call because refer same object!!!! can have many 'local' instances want binding 'this'. try following changes, guess should work.

pg.views.itemlist = backbone.view.extend({    tagname:  "div",   classname: "items",    initialize: function() {     _.bindall(this, 'addone', 'addselected')      this.myitems = new pg.collections.itemlist(); //create local reference      this.myitems.bind('add', this.addone);      this.myitems.fetch();   },    ...     });  pg.views.section = backbone.view.extend({    tagname:  "section",     initialize: function() {     _.bindall(this, 'render', 'close', 'additemtosection', 'removeitemfromsection');     this.model.bind('change', this.render);     this.model.view = this;      this.mysectionitems = new pg.collections.itemlist; //add 'this'   },    render: function() {     $(this.el).html(this.sectiontemplate(this.model.tojson()));     this.setcontent();     this.mysectionitems.bind('add', this.additemtosection);         // "add" event bind     this.mysectionitems.bind('remove', this.removeitemfromsection); // "remove" event bind     this.additems();     return this;   }, ...  });