Modifica della proprietà dell'array del modello Backbone e modifica del listener di eventi non sempre attivando

Question

Ho trovato qualcosa di strano in Backbone utilizzando gli eventi di modifica. È con un modello che ha una proprietà Array. E se ho la proprietà spingere un nuovo valore all'interno e riportarlo al modello l'evento di modifica non viene licenziato ...

Ecco un esempio completamente documentato:

var TestModel = Backbone.Model.extend({ 
    defaults : { 
     numbers : [] 
    }, 

    initialize : function() { 
     this.on('change:numbers', this.changedEvent); 
    }, 

    changedEvent : function() { 
     console.log('model has changed'); 
    } 
}); 

var oTestModel = new TestModel(); 
    oTestModel.set('numbers', [2, 3, 4]); // change:numbers Event is fired 

var aNumbers = oTestModel.get('numbers'); 
    aNumbers.push(5); 

oTestModel.set('numbers', aNumbers); // change:numbers event is NOT fired BUT WHY??? 

// oTestModel.set('numbers', [2, 3, 4]); 
// If this line is not commented out change:numbers event is also fired 

console.log(oTestModel.toJSON()); // Dumps out [2,3,4,5] Respective [2,3,4] if line above is not commented out 

Thx in anticipo.

Answer 1

Hesson è di circa assolutamente ragione:

array in JavaScript sono trattati come puntatori, in modo da mutare la matrice non cambierà il puntatore e nessun evento "change" viene attivato.

Tuttavia, come una soluzione alternativa (se si utilizza anche underscore.js) si può solo fare:

var aNumbers = _.clone(oTestModel.get('numbers')); 
aNumbers.push(5); 

oTestModel.set('numbers', aNumbers); //Will trigger the changed:numbers event 

Come si è visto nella risposta a questo problema simile: Backbone.js : change not firing on model.change()

Questo duplicherà l'oggetto invece di renderlo un riferimento, tuttavia gli oggetti o le matrici annidate saranno solo riferimenti.

Answer 2

Le matrici in JavaScript vengono trattate come puntatori, pertanto la mutazione della matrice non cambia il puntatore e non viene generato alcun evento di "modifica". Invece è necessario impostare un metodo in cui si muta l'array e in questo metodo si attiva il proprio evento personalizzato. Ad esempio:

mutateArray: function() { 
    var numbers = this.get("numbers"); 
    numbers.push(5); 
    this.trigger("mutatedarray"); 
    return this; 
} 

noti che poiché i numeri è un puntatore, sarebbe inutile call set (no pun intended), poiché i numeri è solo un riferimento alla matrice. Quindi è possibile ascoltare le modifiche ascoltando l'evento mutatedarray personalizzato come questo:

this.on("mutatedarray", this.changedEvent, this);