Populating contents of Ember.Select view from RecordArray retrieved using Ember-data

Question

I have a select list that is created using this code:

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

riskCategory is a property of the App.Facility model loaded for the template and the list of App.RiskCategory is populated with this code:

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

This works fine and populates the select list but only with the sub-set of Risk Categories already loaded into the browser. If I call App.RiskCategory.find() from the browser console then the rest are loaded and the select list updates however I can't get the code working to do this for me.

So I tried:

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

or:

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

But both of these result in the following error:

Uncaught Error: Attempted to handle event `loadedData` on <App.Facility:ember417:1> while in state rootState.loaded.updated.uncommitted. Called with undefined

I'd appreciate any help or suggestions on a better way to populate the select list. These App.RiskCategory objects should be considered an immutable collection of constants stored in the db. Each of the App.Facility objects is associated with one of these App.RiskCategories

Thanks!

Answer 1

Try instead to set the categories in your route and access it in your template through the controller

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

});  

Assuming your select view is within the same context as the controller, You get access to categories in your template this way:

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

Answer 2

I solved this problem by wrapping the rendering of each App.Facility in a {{#if isLoaded}}

So the code looked somthing like:

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

It appears that the App.Facility object that setting the App.RiskCategory hadn't finished loading yet, so the default App.RiskCategory was being set and then when the dataLoaded event was fired, the exception was being thrown because the object had already been modified.