Ember.js a rempli et sélectionné par deux objets différents

Question

Je suis nouveau dans Ember, alors peut-être que je fais mal.

J'essaie de créer une liste déroulante sélectionnée, peuplée de trois valeurs fournies à partir d'une source de données externe. Je voudrais également avoir la valeur correcte dans la liste sélectionnée en fonction de la valeur stockée dans un modèle différent.

La plupart des exemples que j'ai vus traiter avec une liste déroulante définie statique. Jusqu'à présent, ce que j'ai est:

{{#view contentBinding="App.formValues.propertyType" valueBinding="App.property.content.propertyType" tagName="select"}}
  {{#each content}}
    <option {{bindAttr value="value"}}>{{label}}</option>
  {{/each}}
{{/view}}

Et dans mon module:

App.formValues = {};
App.formValues.propertyType = Ember.ArrayProxy.create({
    content: [
        Ember.Object.create({"label":"App","value":"app", "selected": true}),
        Ember.Object.create({"label":"Website","value":"website", "selected": false}),
        Ember.Object.create({"label":"Mobile","value":"mobile", "selected": false})
    ]
});

Et enfin mon objet:

App.Property = Ember.Object.extend({
    propertyType: "app"
});

App.property = Ember.Object.create({
    content: App.Property.create(),

    load: function(id) {
      ...here be AJAX  
    }
});

La liste déroulante remplira, mais son état sélectionné ne reflétera pas la valeur de l'App.Property. Je sais que je manque des pièces et j'ai besoin de quelqu'un pour me dire dans quelle direction je devrais aller.

Answer 1

La réponse a été d'utiliser .ObServes () sur les FormValues. Pour une raison quelconque .Property () jetterait une erreur mais .Observes () ne le ferait pas.

J'ai publié la solution complète de l'Ajax ici pour référence et je le mettrai à jour avec tout autre développement.

App.formValues = {};
App.formValues.propertyType = Ember.ArrayProxy.create({
    content: [],

    load: function() {
        var that = this;

        $.ajax({
            url: "/api/form/propertytype",
            dataType: "json",
            success: function(data) {
                that.set("content", []);
                _.each(data, function(item) {
                    var optionValue = Ember.Object.create(item);
                    optionValue.set("selected", false);
                    that.pushObject(optionValue);
                });
                that.update();
            }
        });
    },

    update: function() {
        var content = this.get("content");
        content.forEach(function(item) {
            item.set("selected", (item.get("value") == App.property.content.propertyType));
        });
    }.observes("App.property.content.propertyType")
});
App.formValues.propertyType.load();