Come si modificano gli elementi in un array gestito da un controller Ember?

Question

Probabilmente mi manca qualcosa di veramente stupido, (Ember newbie) ma non riesco a capire come modificare un array che è sotto la gestione del mio controller Ember, oltre a impostare un array completamente nuovo.

Ad esempio. Ho la seguente funzione di test nel mio controller. Quando l'utente fa clic, voglio modificare ogni elemento dell'array controllato (o potrebbe essere un singolo elemento) con un nuovo valore.

Capisco che si suppone di passare attraverso "set" per apportare le modifiche noti per Ember, così ho pensato che questo avrebbe funzionato:

clickHandler:function(e){ 
    var temp = this.get("itemList").copy(); // copy it 
    for (var i = 0; i < temp.length; i++) { 
     temp[i].desc = "CANCELLED";  // change it 
    } 
    this.set('itemList', temp); // put it back 
} 

faccio una copia della matrice, modificarlo, e quindi riportarlo indietro. Ma in qualche modo Ember si lamenta della quarta riga, dove modifico il contenuto di temp [i] .desc, dicendo che devo usare Ember.Set. Supponevo di poter modificare la copia "offline" e quindi di ripristinarla, ma no-go e non riesco a capire perché. Altre operazioni di array, come shift/unshift/pop sembrano funzionare.

Answer 1

Il tuo approccio non sembra molto imbarazzante. Questo codice avrebbe funzionato:

clickHandler:function(e){ 
    var itemList = this.get("itemList"); 
    itemList.forEach(function(item){ // for iterating over an array, always use the forEach function 
     item.set("desc", "CANCELLED"); // you have to call this set()-function to make changes to an Ember Object 
    }); 
} 

Perché avete bisogno di chiamare il set() - metodo e non si può utilizzare il metodo di accesso diretto?

Il metodo set() - consente a Ember di eseguire la sua magia autobinding. Quando viene chiamato questo metodo, pianifica tutte le cose che devono essere eseguite sugli oggetti che dipendono dalla proprietà modificata. L'esempio più semplice è un modello che mostra quella proprietà che avrebbe bisogno di un aggiornamento.

Ecco un possibile miglioramento sul codice di cui sopra per rendere ancora più emberish: Si potrebbe utilizzare un ArrayController per gestire il tuo ITEMLIST. In questo caso, imposterai la tua ItemList come proprietà content del controller. Si noterà che molti tutorial sfruttano questo controller se si tratta di un array.

App.ItemListController = Ember.ArrayController.extend({ 
    content : null, //set your itemList into this property 
    clickHandler:function(e){ 
     this.get("content").setEach("desc", "CANCELLED"); 
    } 
});