Peupler le contenu de la vue Ember.Select à partir de RecordArray récupéré en utilisant Ember-data

Question

J'ai une liste déroulante qui est créée en utilisant ce code :

      {{view Ember.Select
      contentBinding="App.riskCategories"
      optionValuePath="content.id"
      optionLabelPath="content.name"
      selectionBinding="riskCategory"
      class="input-medium"}}

riskCategory est une propriété du modèle App.Facility chargé pour le template et la liste des App.RiskCategory est remplie avec ce code :

App.ready = function() {
  App.riskCategories = App.RiskCategory.all()
}

Cela fonctionne bien et remplit la liste déroulante mais seulement avec le sous-ensemble de catégories de risque déjà chargées dans le navigateur. Si j'appelle App.RiskCategory.find() depuis la console du navigateur alors le reste est chargé et la liste déroulante se met à jour mais je n'arrive pas à faire fonctionner le code pour le faire pour moi.

Donc j'ai essayé :

App.ready = function() {
  App.riskCategories = App.RiskCategory.find()
}

ou :

App.ready = function() {
  App.RiskCategory.find()
  App.riskCategories = App.RiskCategory.all()
}

Mais ces deux résultats donnent l'erreur suivante :

Uncaught Error: Tentative de gérer l'événement `loadedData` sur  pendant l'état rootState.loaded.updated.uncommitted. Appelé avec undefined

Je serais reconnaissant pour toute aide ou suggestion sur une meilleure manière de remplir la liste déroulante. Ces objets App.RiskCategory devraient être considérés comme une collection immuable de constantes stockées dans la base de données. Chacun des objets App.Facility est associé à l'une de ces App.RiskCategories

Merci !

Answer 1

Essayez plutôt de définir les catégories dans votre route et y accédez dans votre modèle à travers le contrôleur

APP.YourRoute = Ember.Route.extend({
    setupController:function(controller,model) {
       this._super(controller,model);
       controller.set('riskCategories',App.RiskCategory.find());
    },  

});  

En supposant que votre vue de sélection se trouve dans le même contexte que le contrôleur, vous pouvez accéder aux catégories dans votre modèle de cette manière:

{{view Ember.Select
  contentBinding="controller.riskCategories"
  optionValuePath="content.id"
  optionLabelPath="content.name"
  selectionBinding="riskCategory"
  class="input-medium"}}

Answer 2

J'ai résolu ce problème en enveloppant le rendu de chaque App.Facility dans un {{#if isLoaded}}

Donc le code ressemblait à :

{{#each client.facilities}}
  {{#if isLoaded}}
    {{view Ember.Select
      contentBinding="App.riskCategories"
      optionValuePath="content.id"
      optionLabelPath="content.name"
      selectionBinding="riskCategory"
      class="input-medium"}}
  {{/if}}
{{/each}}

Il semble que l'objet App.Facility qui définit le App.RiskCategory n'avait pas encore terminé de se charger, donc le App.RiskCategory par défaut était défini et ensuite lorsque l'événement dataLoaded était déclenché, l'exception était générée car l'objet avait déjà été modifié.

Answer 3

J'ai eu un problème similaire et la solution utilisant #isLoaded ne fonctionnait pas pour moi. Cependant, ce qui a fonctionné était d'ajouter une propriété prompt à l'élément Ember.Select. Je soupçonne que cela a à voir avec l'asynchronicité du rendu de la vue et du chargement des données (dans mon cas à partir de FIXTURES, mais autant que je sache, DS.FixtureAdapter simule des délais de chargement des données).