Warum wird das Ember-Modell nicht aktualisiert?

Question

Mein Ziel ist es, einfach eine Zahl an ein Array-Modell anhängen. Dies sollte aufgrund des Iterators, den ich in der Vorlage verwendet habe, ein neues HTML-Element erzeugen.

Meine Aktion wird aufgerufen, aber das Modell wird nicht wirklich aktualisiert.

Hier ist meine Verzeichnisstruktur:

- app 
    - routes 
    - compare.js 
    - templates 
    - compare.hbs 
    - application.hbs 
    - app.js 
    - index.html 
    - router.js 

compare.hbs:

<div id="container"> 
    <form method="post" name="login" {{action "submit" on="submit"}}> 
     <p> 
      Member ID 
     </p> 
    <p> {{input id="member-id" type="text"}} <input type="submit" value="Search"></p> 
    </form> 
    <div id="results"> 
     {{#each model as |result|}} 
     <p>{{ result }}</p> 
     {{/each}} 
    </div> 
</div> 

router.js

import Ember from 'ember'; 
import config from './config/environment'; 

var Router = Ember.Router.extend({ 
    location: config.locationType 
}); 

Router.map(function() { 
    this.route('compare'); 
}); 

export default Router; 

compare.js

import Ember from 'ember'; 

let results = [12, 34, 56]; 

export default Ember.Route.extend({ 
    model: function() { 
    return results; 
    }, 
    actions: { 
    submit: function() { 
     results.push(123); 
     this.get('model').push(123); 
     this.refresh(); 
    } 
    } 
}); 

Was ist das Problem?

Answer 1

Es sieht aus wie Sie ein paar Probleme haben. Sie brauchen results.push nicht, da Sie den Wert außerhalb von Embers Wissen nur zum Array hinzufügen. Verwenden Sie beim Hinzufügen zum Modell pushObject, da dies die Änderung mitteilen soll. Es ist auch nicht erforderlich, die Aktualisierung auf dem Modell aufzurufen.

Die Dokumentation für pushObject ein Beispiel sehr ähnlich zeigt, was Sie versuchen.

http://emberjs.com/api/classes/Ember.NativeArray.html#method_pushObject

import Ember from 'ember'; 

let results = [12, 34, 56]; 

export default Ember.Route.extend({ 
    model: function() { 
    return results; 
    }, 
    actions: { 
    submit: function() { 
     this.model().pushObject(123); 
    } 
    } 
});