Ember, il mio modello non si aggiorna sulle modifiche delle proprietà

Question

Perché il modello non viene aggiornato quando cambio la proprietà che sta visualizzando? Lo documentation afferma che {{each}} è compatibile con le associazioni, ma ovviamente non ne sono a conoscenza.

Come tutto in Handlebars, l'helper {{#each}} è associato alle associazioni. Se l'applicazione aggiunge un nuovo elemento all'array, o rimuove un oggetto, il DOM verrà aggiornato senza dover scrivere alcun codice.

Ecco il mio controller

App.MaintemplateController = Ember.Controller.extend({ 
    alist: ['foo', "bar"],   
    actions : { 
    addel: function(){ 
      this.alist.push('xpto'); 
      console.log(this.alist); 
    } 
    } 
}); 

Nel mio modello ho il seguente codice.

{{#each alist}} 
    <li>{{.}}</li> 
{{/each}} 
<button {{action 'addel'}}>Add element</button> 

i dati vengono correttamente resa, e quando si fa clic sul pulsante lo fa aggiungere elementi alla proprietà, ma il modello non viene aggiornata. Perché? Come faccio a tenerlo sincronizzato con i miei dati?

Answer 1

Il modello non viene aggiornato perché si sta utilizzando plain vanilla javascript .push invece della brace dalla condizione .pushObject e .removeObject rispettivamente. Per impostazione predefinita, Ember estende il prototipo dell'array per farlo funzionare bene in un ambiente di rilegatura.

Quindi, per rendere l'aggiornamento del modello si dovrebbe fare:

App.MaintemplateController = Ember.Controller.extend({ 
    alist: ['foo', "bar"],   
    actions : { 
    addel: function(){ 
     this.get('alist').pushObject('xpto'); 
     console.log(this.get('alist')); 
    } 
    } 
}); 

La linea importante qui è this.get('alist').pushObject('xpto'); Inoltre si dovrebbe sempre usare .get() e .set() per accedere agli oggetti nella brace altrimenti il ​​meccanismo vincolante non sarà a conoscenza di modifiche apportate all'oggetto.

Spero che aiuti.