Backbone.js: Sự kiện "thay đổi" của bộ sưu tập không kích hoạt

Question

Tôi có một bộ sưu tập khá đơn giản, nhưng dường như tôi không thể liên kết với sự kiện thay đổi của bộ sưu tập đó. Trong giao diện điều khiển của Chrome, Tôi đang chạy:

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? 

Vì đây là một trong những điều đó có thể khó khăn để theo dõi xuống, tôi nghi ngờ bất cứ ai biết ra khỏi đỉnh đầu của họ những gì đang xảy ra (nếu như vậy, tuyệt vời!). Vì vậy, tôi hỏi hai câu hỏi:

1. Mã trên có hoạt động như dự kiến ​​không?
2. Nếu vậy, bạn có bất kỳ đề xuất nào về cách theo dõi vị trí này không?

Cảm ơn

Answer 1

Sự kiện change chỉ phát sinh khi một trong những mô hình của bộ sưu tập được sửa đổi. Khi một mô hình được thêm vào bộ sưu tập, sự kiện add được kích hoạt.
Xem Backbone.js' Collection Documentation:

Bạn có thể để ràng buộc 'thay đổi' sự kiện để được thông báo khi bất kỳ mô hình trong bộ sưu tập đã được sửa đổi, lắng nghe để 'add' và 'loại bỏ' sự kiện [. ..]

để nghe khi một add xảy ra thay đổi mã của bạn để được

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

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

Answer 2

tôi hy vọng AwesomeCollection là một Trở lại boneCollection.

var AwesomeCollection = new Backbone.Collection(); 

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

AwesomeCollection.add({something}); 

Điều này sẽ kích hoạt sự kiện của bạn. Nếu không, có một vấn đề khác ở một nơi khác.

Chỉnh sửa: thay đổi không thể được kích hoạt khi thêm sự kiện như những người khác đã nói.

Answer 3

Không, điều đó chỉ làm tăng sự kiện "thêm". Nó sẽ nâng cao sự kiện thay đổi nếu bạn làm điều này:

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

Ngoài ra, chúng ta không thể nói từ ví dụ của bạn, nhưng một Bộ sưu tập phải có tài sản mô hình của nó được xác định nếu bạn muốn thêm các mô hình để nó bằng cách đơn giản thông qua một đối tượng. Nếu không, bạn phải vượt qua một cá thể mô hình để thêm().

Answer 5

Tôi gặp phải sự cố tương tự như của bạn trên xương sống 0.5.3.

Nhìn vào Backbone.Collection.reset() thực hiện (được gọi là sau một lấy() nếu bạn không cung cấp bất kỳ "add" bất động sản bắt buộc), dòng 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 điều quan trọng ở đây:

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

có nghĩa là bạn sẽ không có bất kỳ sự kiện "thêm" nào được kích hoạt.

Điều thứ hai là:

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

Nghĩa là nếu bạn thay thế mã của bạn với:

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? 

Nó sẽ làm việc (làm việc cho tôi)

Answer 6

Nó có thể không cần thiết trong hầu hết các trường hợp, nhưng bạn có thể kích hoạt sự kiện thay đổi theo cách thủ công trên đối tượng/bộ sưu tập của mình:

object.trigger("change"); 

Answer 7

Tôi không tìm thấy tài liệu ở bất cứ nơi nào nhưng sự kiện "tất cả" sẽ kích hoạt trên tất cả các hành động, bao gồm thêm, xóa và thay đổi.

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

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

Answer 8

Nếu bạn muốn biết khi một cái gì đó có ý nghĩa đã được thực hiện với một bộ sưu tập, đây là những sự kiện có thể bạn muốn nghe: change add remove reset

đối với ví dụ của bạn Với, đây là những gì mã của bạn có thể trông giống như:

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