Backbone.js: el evento de "cambio" de la colección no se activa

Question

Tengo una colección bastante simple, pero no puedo vincularme a su evento de cambio. En la consola de Chrome, estoy corriendo:

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? 

Dado que esta es una de esas cosas que pueden ser difíciles de localizar, no creo que nadie sabe de la parte superior de su cabeza lo que está pasando (si es así, genial!) Entonces, estoy haciendo dos preguntas:

1. ¿Debería el código anterior funcionar como se esperaba?
2. Si es así, ¿tiene alguna sugerencia sobre cómo rastrear dónde esto podría fallar?

Gracias

Answer 1

El evento change solamente se dispara cuando uno de los modelos de las colecciones se modifican. Cuando se agrega un modelo a la colección, se desencadena el evento add.
Ver Backbone.js' Collection Documentation:

Usted puede unirse a los eventos de 'cambio' para ser notificados cuando cualquier modelo de la colección se ha modificado, escucha de 'añadir' y 'eliminar' eventos [. ..]

para detectar cuando un add ocurre modificar el código para ser

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

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

Answer 2

espero AwesomeCollection es un nuevo boneCollection.

var AwesomeCollection = new Backbone.Collection(); 

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

AwesomeCollection.add({something}); 

Esto debería desencadenar su evento. Si no, hay otro problema en otro lugar.

Editar: no se puede activar el cambio en el evento de agregar como han dicho otros.

Answer 3

No, eso solo provoca el evento "agregar". Se elevará el evento de cambio si lo hace:

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

Además, no podemos decir de su ejemplo, sino una colección debe tener su propiedad de modelo define si desea agregar modelos a ella simplemente pasando un objeto. De lo contrario, debe pasar una instancia de modelo para agregar().

Answer 5

Tuve el mismo problema que el tuyo en la red troncal 0.5.3.

En cuanto a Backbone.Collection.reset() aplicación (que se llama después de un fetch() si usted no proporciona ninguna "añadir" propiedad opcional), la línea 503 a 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 las cosas son importantes aquí:

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

lo que significa que no tendrá ningún evento "agregar" activado.

Lo segundo es el:

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

Lo que significa que si se reemplaza el código con:

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? 

debería funcionar (trabajó para mí)

Answer 6

Puede que no sea necesario la mayoría de los casos, pero puede activar manualmente un evento de cambio en su objeto/colección:

object.trigger("change"); 

Answer 7

No lo encuentro documentado en ningún lado excepto el evento "todos" se desencadena en todas las acciones, incluidas las de agregar, eliminar y cambiar.

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

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

Answer 8

Si quieres saber cuando algo de importancia se ha hecho con una colección, estos son los eventos que probablemente desea escuchar: change add remove reset

Con respecto a su ejemplo, esto es lo que su código podría verse como:

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