與「本」在Backbone.js的時候集合中

Question

我已經基於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 
    } 

}); 

這裏以下兩個觀點結合「添加」 /「刪除」奇怪的行爲是我的問題遇到。

我有一個用戶創建兩個部分的視圖，可以說他們被稱爲「section1」和「section2」。這些名字用在他們的「title」屬性中。

這裏是奇怪的行爲，我觀察：

1. 當用戶處於「SECTION1」和 增加和項目，「添加」綁定事件 被觸發，這導致 「第2節「正在寫入 控制檯。

2. 當用戶處於「SECTION1」和 增加和項目，「刪除」綁定被觸發 事件，這將導致 「SECTION1」被寫入 控制檯。

3. 當用戶在「第2節」和 增加和項目，「添加」綁定事件 被觸發，該結果 「第2節」被寫入 控制檯。

4. 當用戶在「第2節」和 增加和項目，「刪除」綁定被觸發 事件，這將導致 「第2節」，然後「SECTION1」被寫入 控制檯。

如果我綁定「添加」使用「this.addItemToSection」中的「pg.views.Section」視圖中，不應該只調用實例裏面的「addItemToSection」塊？

我可以看到「重新定義」「this」的唯一行是「pg.views.ItemList」初始化塊中的「add」綁定。如果這條線是罪魁禍首，我該如何防止它在「section1」的「add」綁定上重新定義「this」？

Answer 1

我認爲這是一個全局性問題，雙關意圖;）您正在調用Items上的所有內容，這些內容首先用var聲明 - （壞習慣）意味着它將被綁定到窗口對象。而你在另一個視圖中使用相同的變量引用！所以兩個人都會打電話，因爲他們指的是同一個對象！通過綁定到「this」，您可以擁有任意多個「本地」實例。嘗試以下更改，我想他們應該工作。

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 to '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; 
    }, 
... 

});