Backbone.js: L'evento "change" della raccolta non viene attivato

Question

Ho una collezione piuttosto semplice, ma non riesco a legarmi al suo evento di cambiamento. Nella console di Chrome, sto correndo:

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? 

Dal momento che questa è una di quelle cose che possono essere difficili da rintracciare, dubito che qualcuno sa la parte superiore della testa quello che sta succedendo (in caso affermativo, grande!). Quindi, sto facendo due domande:

1. Il codice di cui sopra funziona come previsto?
2. Se sì, avete qualche suggerimento su come rintracciare dove ciò fallirebbe?

Grazie

Answer 1

L'evento change viene attivato solo quando uno dei modelli delle collezioni vengono modificati. Quando un modello viene aggiunto alla collezione viene attivato l'evento add.
See Backbone.js' Collection Documentation:

È possibile associare eventi 'cambiamento' di essere avvisati quando un qualsiasi modello della collezione è stato modificato, ascoltare per 'aggiungere' e 'togliere' eventi [. ..]

per ascoltare per quando un add verifica modificare il codice per essere

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

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

Answer 2

Spero AwesomeCollection è un Back boneCollection.

var AwesomeCollection = new Backbone.Collection(); 

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

AwesomeCollection.add({something}); 

Questo dovrebbe far scoppiare il tuo evento. In caso contrario, c'è un altro problema da qualche altra parte.

Modifica: la modifica non può essere attivata per aggiungere eventi come altri.

Answer 3

No, questo solleva solo l'evento "aggiungi". Si alzerà l'evento di modifica se si fa questo:

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

Inoltre, non possiamo dire dal tuo esempio, ma una raccolta deve avere la sua proprietà modello definito, se si desidera aggiungere modelli ad esso semplicemente passando un oggetto. Altrimenti, devi passare un'istanza di modello da aggiungere().

Answer 5

Ho affrontato lo stesso problema del tuo su dorsale 0.5.3.

Guardando Backbone.Collection.reset() implementazione (che viene chiamato dopo un fetch() se non si fornisce alcun "add" proprietà facoltativa), la linea 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 le cose sono importanti qui:

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

che significa che non si verificherà alcun evento "Aggiungi".

seconda cosa è la:

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

Il che significa che se si sostituisce il codice 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? 

Dovrebbe funzionare (ha lavorato per me)

Answer 6

Potrebbe non essere necessario in la maggior parte dei casi, ma è possibile attivare manualmente un evento di modifica sul proprio oggetto/collezione:

Answer 7

Non lo trovo documentato da nessuna parte ma l'evento "tutto" si attiva su tutte le azioni, tra cui aggiungi, rimuovi e modifica.

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

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

Answer 8

Se vuoi sapere quando qualcosa di significativo è stato fatto con una collezione, questi sono gli eventi che probabilmente desidera ascoltare: change add remove reset

Per quanto riguarda il vostro esempio, questo è ciò che il codice potrebbe essere:

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