title: Ember Data + Ember.Select - automatic or manual?
body: <p>I have a simple example app I'm working on trying to learn Ember + Ember Data. If I set up my relationships in the model, I figured the first party Ember.Select object would manage the relationship, but I'm receiving errors.</p>
  
  <p>For the selection content (options), I'm using an array (computed for sorting) set on the local/current controller, populating it within the route's setupController method, then using the model's relationship property as the the selection property on Ember.Select.</p>
  
  <p>It throws an error on load for the 'New' route, but works on 'Edit' if relationship data already exists...but will throw an error when selecting the null/empty value (supplied with 'prompt' attribute.)</p>
  
  <p>Should this work? Or is this not the Ember + Ember Data way?</p>
  
  <p>Error on New:</p>
  
  <pre><code>Uncaught Error: Assertion Failed: The content property of DS.PromiseArray should be set before modifying it
  </code></pre>
  
  <p>Error on Edit when selecting prompt/null value:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'constructor' of undefined
  </code></pre>
  
  <p><em>router.js</em></p>
  
  <pre><code>Router.map(function() {
      this.resource('menu-items', function(){
          this.route('new');
          this.resource('menu-item', { path: '/:menu-item_id' }, function() {
              this.route('edit');
          });
      });
  
      this.resource('food-groups', function(){
          this.route('new');
          this.resource('food-group', { path: '/:food-group_id' }, function() {
              this.route('edit');
          });
      });
  });
  </code></pre>
  
  <p><em>models/menu-item.js</em></p>
  
  <pre><code>export default DS.Model.extend({
      title: DS.attr('string'),
      description: DS.attr('string'),
      foodGroups: DS.hasMany('food-group', { 'async': true })
  });
  </code></pre>
  
  <p><em>models/food-group.js</em></p>
  
  <pre><code>export default DS.Model.extend({
      title: DS.attr('string'),
      description: DS.attr('string'),
      menuItems: DS.hasMany('menu-item')
  });
  </code></pre>
  
  <p><em>routes/menu-items/new.js</em></p>
  
  <pre><code>export default Ember.Route.extend({
    model: function(){
      return this.store.createRecord('menu-item');
    },
  
    setupController: function (controller, model) {
      this._super(controller, model);
  
      controller.set('foodGroupsAll', this.store.find('food-group'));
    }
  });
  </code></pre>
  
  <p><em>controllers/menu-items/new.js</em></p>
  
  <pre><code>export default Ember.ObjectController.extend({
    foodGroupsAll: Ember.A(),
    foodGroupsSorting: ['title:asc'],
    foodGroupsLookup: Ember.computed.sort('foodGroupsAll', 'foodGroupsSorting')
  
    // foodGroupsAllLog: function() {
    //   console.group(this.toString() + 'foodGroupsAllLog');
    //   console.log('foodGroupsAll', this.get('foodGroupsAll'));
    //   console.groupEnd();
    // }.property('foodGroupsAll'),
  
    // init: function() {
    //   this._super();
    //   console.group(this.toString() + ':init()');
    //   console.groupEnd();
    // }
  });
  </code></pre>
  
  <p><em>templates/menu-items/new.js</em></p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label for="input-food-groups" class="control-label"&gt;Food Group(s)&lt;/label&gt;
      {{view Ember.Select 
          content=controller.foodGroupsLookup 
          selection=model.foodGroups 
          optionValuePath="content.id" 
          optionLabelPath="content.title" 
          prompt="Choose Food Group" 
          multiple="true" 
          class="form-control" 
          id="input-food-groups"}}
  &lt;/div&gt;
  
  &lt;dl&gt;
      &lt;dt&gt;controller.foodGroupsLookup.length&lt;/dt&gt;
          &lt;dd&gt;{{controller.foodGroupsLookup.length}}&lt;/dd&gt;
      &lt;dt&gt;model.foodGroups.length&lt;/dt&gt;
          &lt;dd&gt;{{model.foodGroups.length}}&lt;/dd&gt;
  &lt;/dl&gt;
  
  {{log ''}}
  {{log 'NEW-FORM'}}
  {{log 'form:foodGroupsLookup' foodGroupsLookup}}
  </code></pre>
  
  <p>Using:</p>
  
  <pre><code>DEBUG: -------------------------------
  DEBUG: Ember      : 1.5.1 
  DEBUG: Ember Data : 1.0.0-beta.8.2a68c63a
  DEBUG: Handlebars : 1.3.0
  DEBUG: jQuery     : 1.11.1
  DEBUG: -------------------------------
  </code></pre>