Ember, meine Vorlage wird nicht aktualisiert, wenn die Eigenschaft geändert wird

Question

Warum wird meine Vorlage nicht aktualisiert, wenn ich die Eigenschaft ändere, die sie rendert? Die documentation besagt, dass {{each}} Bindings-bewusst ist, aber es gibt offensichtlich etwas, das mir nicht bewusst ist.

Wie alles in Handlebars, ist der {{#each}} Helfer binding-aware. Wenn Ihre Anwendung dem Array ein neues Element hinzufügt oder ein Element entfernt, wird das DOM aktualisiert, ohne Code schreiben zu müssen.

Hier ist mein Controller

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

In meiner Vorlage ich den folgenden Code haben.

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

Die Daten richtig wiedergegeben wird, und wenn ich auf die Schaltfläche klicken, um es tut Elemente auf die Eigenschaft anhängen, aber die Vorlage nicht aktualisiert. Warum? Wie kann ich die Daten mit meinen Daten synchronisieren?

Answer 1

Ihre Vorlage wird nicht aktualisiert, weil Sie plain vanilla javascript .push statt der von Ember bereitgestellten .pushObject bzw. .removeObject verwenden. Ember erweitert standardmäßig den Array-Prototyp, um ihn in einer Umgebung mit bindendem Bewusstsein gut spielen zu lassen.

So Ihre Vorlage aktualisieren, damit Sie tun sollten:

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

Die wichtige Linie ist hier this.get('alist').pushObject('xpto'); Außerdem sollten Sie immer .get() verwenden und .set() auf Objekte in ember Zugriff sonst die Bindungsmechanismus nicht bewusst sein, Änderungen am Objekt.

Ich hoffe, es hilft.