title: Populating Ember.Select from a dependent controller using EmberData lazy-loading
body: <p>I have spent about 10 days on a simple problem I could have solved in about 10 minutes with Dojo.  I hope I am missing something simple - I'm a noob who would like to use Ember.</p>
  
  <p>I am simply trying to populate the content of an Ember.Select with data from another Controller using EmberData.  Consider the case:  being able to select a FoodGroup for a Raw Ingredient.</p>
  
  <p>It seemed clear to use a 'needs' dependency between RawIngredientController and FoodGroupsController, and bind on the content.</p>
  
  <p>This is the closest I have gotten to success and it does not look sufficient to me - I will explain.</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="rawIngredients"&gt;
  
       {{#each item in controller itemController="rawIngredient" }}
  
              {{! view Ember.Select
                      contentBinding="controllers.foodGroups.content"
                      optionValuePath="content.id"
                      optionLabelPath="content.name"
                      prompt="select Food Group" }}
  
       {{/each}}
  &lt;/script&gt;
  
  Cook.RawIngredientController = Ember.ObjectController.extend({
      isEditing: false,
      needs: ['foodGroups'],
      ...
  });
  
  
  Cook.RawIngredient = DS.Model.extend({
      name: DS.attr('string'),
      nameKey: DS.attr('string'),
      foodGroup: DS.belongsTo('Cook.FoodGroup')
  });
  
  Cook.FoodGroupsRoute = Ember.Route.extend({
    setupController: function(controller) {
       controller.set('content', Cook.FoodGroup.all());  // have also tried find()
    }
  });
  
  Cook.FoodGroup = DS.Model.extend({
      name: DS.attr('string'),
      nameKey: DS.attr('string')
  });
  </code></pre>
  
  <p>This actually renders all RawIngredients with no errors, but the Selects are empty because the FoodGroups store is empty.  I can navigate to the FoodGroups screen which loads the store, come back to RawIngredients, and the selects are populated with FoodGroups.  </p>
  
  <p>I've seen a number of posts on this issue but none sufficiently address the issue when EmberData is involved. There are plenty of post-loaded examples, like this clever one from pangratz  <a href="http://jsfiddle.net/pangratz/hcxrJ/" rel="nofollow noreferrer">http://jsfiddle.net/pangratz/hcxrJ/</a>  - but I haven't found any using EmberData to lazy-load the content.</p>
  
  <p>This post is pretty close
  <a href="https://stackoverflow.com/questions/14093558/ember-js-ember-select-valuebinding-and-lazy-loading">Ember.js: Ember.Select valueBinding and lazy loading</a></p>
  
  <p>and contains a workaround using an observer, which I couldn't get to work.  I ended up binding to a binding which never invoked the actual loading of the FoodGroup data.  Here's an example, maybe not the best, of one such attempt (of probably 20+):</p>
  
  <pre><code>Cook.FoodGroupsController = Ember.ArrayController.extend({
      ...
         // NOTE: This seems redundant
      values: function() {
          return this.get('content');
      }.property(),
      ...
  });
  
  Cook.RawIngredientController = Ember.ObjectController.extend({
      ...
      // this should be the instance; also tried the object name FoodGroupsController....also tried using needs + 'controllers.foodGroups.values' in the binding
      allFoodGroups: Ember.Binding.oneWay('Cook.foodGroupsController.values'),  '
  
      /*
      //  ... or rather ....??
  
      allFoodGroups: function() {
          this.get('foodGroupsBinding');
      },
      foodGroupsBinding: "Cook.foodGroupsController.values",
      */
  
      ...
  });
  
          {{view Ember.Select
                  contentBinding="allFoodGroups"
                  optionValuePath="content.id"
                  optionLabelPath="content.name"
                  prompt="select Food Group" }}
  </code></pre>
  
  <p>but it errors saying 'allFoodGroups' is providing a Binding not an Ember.Array.  I think I am lost in a sea of swirling naming conventions.  I could show my other attempts at this, but all had errors of undefined content.</p>
  
  <p>Ugh.  So backing up a bit... at least using my original solution and pre-loading the FoodGroups store should provide a workaround, however I cannot seem to get EmberData to go out and load the data, programmatically. I tried an init() function in the RawIngredientController like</p>
  
  <pre><code>init: function() {
      var item = this.get('controllers.foodGroups.content.firstObject');
  },
  </code></pre>
  
  <p>but I haven't found the right combination there either.  And even if I do, it seems like the wrong approach because this will set up a reference for each RawIngredient rather than use a single reference from RawIngredients (or FoodGroups?) - but that seems like a different topic.</p>
  
  <p>This is my attempt at a fiddle describing the problem <a href="http://jsfiddle.net/jockor/Xphhg/13/" rel="nofollow noreferrer">http://jsfiddle.net/jockor/Xphhg/13/</a></p>
  
  <p>Has anyone figured out an efficient, effective way to load and use stores defined in other controllers, using EmberData to lazy-load the associated content?  </p>