Backbone.js：收集的「更改」事件不會觸發

Question

我有一個非常簡單的集合，但我似乎無法綁定到它的更改事件。在Chrome瀏覽器的控制檯，我運行：

var c = new AwesomeCollection(); 
c.bind("change", function(){ 
    console.log('Collection has changed.'); 
}); 

c.add({testModel: "Test"}); // Shouldn't this trigger the above log statement? 

由於這是那些東西，可能很難追查一個，我懷疑任何人知道了他們的頭頂上發生了什麼事情（如果是這樣，太好了！ ）。所以，我問了兩個問題：

1. 上面的代碼應該如預期的那樣工作嗎？
2. 如果是這樣，你有什麼建議如何追蹤這將失敗？

感謝

Answer 1

當收藏品的車型之一被修改的change事件僅觸發。將模型添加到集合時，會觸發add事件。
見Backbone.js的Collection Documentation：

您可以綁定當 集合中的任何模型已被修改通知‘變’事件，監聽‘添加’和‘刪除’ 事件[。 ..]

要監聽的add發生修改你的代碼

var c = new AwesomeCollection(); 
c.bind("add", function(){ 
    console.log('Collection has changed.'); 
}); 

c.add({testModel: "Test"}); 

Answer 2

我希望AwesomeCollection的是一個返回boneCollection。

var AwesomeCollection = new Backbone.Collection(); 

AwesomeCollection.bind('add', function() { 
    console.log('new object in the collection'); 
}); 

AwesomeCollection.add({something}); 

這應該激發你的事件。否則，別的地方還有另一個問題。

編輯：更改不能像其他人說的添加事件。

Answer 3

不，只會引發「添加」事件。如果你這樣做會提高改變事件：

var c = new AwesomeCollection(); 
c.bind("change", function() { 
    console.log('Collection has changed.'); 
}); 

var model = new Backbone.Model({testModel: "Test"}); 
c.add(model); 
model.set({testModel: "ChangedTest"}); 

Answer 4

而且，我們不能從你的例子告訴我們，但一個集合必須有其模型屬性定義，如果你想通過簡單地傳遞一個對象模型添加到它。否則，您必須將模型實例傳遞給add（）。

Answer 5

我在主幹0.5.3上面臨同樣的問題。

看着Backbone.Collection.reset（）實現（這是後一個叫取（），如果你不提供任何 「添加」 可選屬性），線503至511：

// When you have more items than you want to add or remove individually, 
// you can reset the entire set with a new list of models, without firing 
// any `added` or `removed` events. Fires `reset` when finished. 
reset : function(models, options) { 
    models || (models = []); 
    options || (options = {}); 
    this.each(this._removeReference); 
    this._reset(); 
    this.add(models, {silent: true}); 
    if (!options.silent) this.trigger('reset', this, options); 
    return this; 
}, 

2這裏重要的事情：

this.add(models, {silent: true}); 

這意味着你將不會有任何「添加」事件觸發。

第二件事是：

if (!options.silent) this.trigger('reset', this, options); 

這意味着，如果你替換代碼：

var c = new AwesomeCollection(); 
c.bind("reset", function(){ 
    console.log('Collection has changed.'); 
} 

c.add({testModel: "Test"}); // Shouldn't this trigger the above log statement? 

它應該工作（爲我工作）

Answer 6

這可能不是必要的大多數情況下，但您可以手動觸發對象/集合中的更改事件：

object.trigger("change"); 

Answer 7

我沒有發現它記錄在任何地方，但「所有」事件觸發所有操作，包括添加，刪除和更改。

var c = new AwesomeCollection(); 
c.bind("all", function(){ 
    console.log('Something happened'); 
}); 

c.add({testModel: "Test"}); 

Answer 8

如果你想知道什麼時候意義的事情已經有收集完成的，這些都是你可能要聽的事件：change add remove reset

對於你的例子，這是你的代碼可能看起來像：

var c = new AwesomeCollection(); 
c.bind('change add remove reset', function(){ 
    console.log('Collection has changed.'); 
});