Backbone Collection添加事件觸發一次

我有一個Backbone集合，當我向其添加新模型時，「添加」事件似乎沒有像我期望的那樣工作。我綁定了2個視圖來監聽集合上的添加事件，但只有一個視圖會收到事件通知，並且發生這種情況時，不會向我的服務器發送PUT請求。當我刪除第二個綁定時，另一個工作，併發送PUT請求。下面的代碼片段：Backbone Collection添加事件觸發一次

var FlagList = Backbone.Collection.extend({ 
    model: Flag // model not shown here... let me know if it would help to see 
}); 

    var FlagCollectionView = Backbone.View.extend({ 
    el: $('ul.#flags'), 
    initialize: function() { 
     flags.bind('add', this.addFlag, this); // this one doesn't fire!! 
    }, 
    addFlag: function(flag) { 
     alert("got it 1"); // I never see this popup 
    } 
}); 

    var AddFlagView = Backbone.View.extend({ 
    el: $("#addFlagPopup"), 
    events: { 
     "click #addFlag": "addFlag" 
    }, 
      initialize: function() { 
        flags.bind('add', this.closePopup, this); // this one fires!! 
      } 
    addFlag: function() { 
     flags.create(new Flag); 
    }, 
    closePopup: function() { 
     alert("got it 2"); // I see this popup 
    } 
}); 

var flags = new FlagList; 
var addFlagView = new AddFlagView; 
var flagCollectionView = new FlagCollectionView;

來源

2012-05-14 threejeez

這是執行的實際順序？即：在初始化flagCollectionView之前發送'click #addFlag'事件嗎？在預期事件觸發之前，將事件綁定到模型和收集很重要 –

此代碼的工作對我來說：

var FlagList = Backbone.Collection.extend({}); 

var FlagCollectionView = Backbone.View.extend({ 
    initialize: function() { 
    flags.bind('add', this.addFlag, this); 
    }, 
    addFlag: function(flag) { 
     alert("got it 1"); 
    } 
}); 

var AddFlagView = Backbone.View.extend({ 
    initialize: function() { 
    flags.bind('add', this.closePopup, this); 
    }, 
    closePopup: function() { 
    alert("got it 2"); 
    } 
}); 

var flags = new FlagList; 
var addFlagView = new AddFlagView; 
var flagCollectionView = new FlagCollectionView; 

flags.add({key:"value"});

check the jsFiddle

您的問題是其他地方。

來源

2012-05-14 08:24:05 fguillen

您是對的。我的代碼中的其他地方出現異常，導致腳本執行停止。謝謝你讓我走上小路！ – threejeez

幾點建議：

ID的VS類

你在通過組合類和ID合格的選擇。 jQuery允許這樣做，但ID選擇器在頁面上應該是唯一的，所以將el: $('ul.#flags')更改爲el: $('ul#flags')。

利用骨幹

我想明確地傳遞我的收藏和/或模型，以我的觀點和看法上使用魔法collection和model屬性。

var flags = new FlagList; 
var addFlagView = new AddFlagView({collection: flags}); 
var flagCollectionView = new FlagCollectionView({collection: flags});

現在意味着，在你看來，你會自動地訪問this.collection

解除綁定事件，以避免鬼意見

var FlagCollectionView = Backbone.View.extend(
{ 
    initialize: function (options) 
    { 
     this.collection.bind('add', this.addFlag, this); 
    }, 
    addFlag: function (flag) 
    { 
     alert("got it 1"); 
    }, 
    destroyMethod: function() 
    { 
     // you need some logic to call this function, this is not a default Backbone implementation 
     this.collection.unbind('add', this.addFlag); 
    } 
}); 

var AddFlagView = Backbone.View.extend(
{ 
    initialize: function() 
    { 
     this.collection.bind('add', this.closePopup, this); 
    }, 
    closePopup: function() 
    { 
     alert("got it 2"); 
    }, 
    destroyMethod: function() 
    { 
     // you need some logic to call this function, this is not a default Backbone implementation 
     this.collection.unbind('add', this.closePopup); 
    } 
});

它看起來像我不得不同意與@fguillen一樣，你的問題必須在你初始化視圖的某個地方，就像我在我的評論中提到的那樣，它最有可能與時間有關，即：在'add'事件已經觸發後，將你的事件綁定到集合。

來源

2012-05-14 09:34:04

非常好的解釋，我之前用_ghost views_類似的東西戰鬥：http://stackoverflow.com/questions/10429648/backbone-js-how-to-unbind-from-events-on-model-remove/10433015# 10433015 – fguillen

非常有幫助。我做了你所建議的改變。謝謝！順便說一句，關於ID的，是不是真正的UL＃標誌？如果id'flags'在頁面上是唯一的（它是），我想我需要的全部是el：$（'＃flags'）...正確嗎？ – threejeez

如果你犯同樣愚蠢的錯誤我做了後，在這裏結束了，請確保您有：

this.collection.bind('add', this.render)

和不：

this.collection.bind('add', this.render())

來源

2012-09-10 02:13:02 sirch

Backbone Collection添加事件觸發一次

回答

相關問題