Proper way to populate Ember.Select

1

I have the following JSbin in which I am trying to create a basic ordering system using ember-data.

http://jsbin.com/ibazom/3

Each order needs to be tied to a customer and I know I need to populate the property (eligibleCustomers) to bind to the Ember.Select, but I don’t quite know where to do it.

Then I need to update the orders/new template with

{{view Ember.Select
  contentBinding="eligibleCustomers"
  optionLabelPath="content.name"
  optionValuePath="content.id"
}}

I am also getting an error when going to /orders that I can’t figure out

TypeError: Cannot read property 'length' of null
2

Cross posted to Stack Overflow and got an answer.

App.OrdersNewController = Ember.ObjectController.extend({
  needs: ['customers'],
  eligibleCustomers: function() {
    return this.get('controllers.customers');
  }.property(),
});

In the corresponding Ember.Select you need to bind to a property like selectedCustomer to allow you to use when saving the record.

{{view Ember.Select
  contentBinding="eligibleCustomers"
  valueBinding='selectedCustomer'
  optionLabelPath="content.name"
  optionValuePath="content.id"
}}

For the OrderNewController to work you have to give it a new order object in the setupController so that the description and other properties correspond to the model for it since its an ObjectController

App.OrdersNewRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('model', App.Order.createRecord({}));
  }
});

Finally in the createUser method, the transitionTo is deprecated. You want to use transitionToRoute instead.

createUser: function() {
  var model = this.get('model');
  var selectedCustomer = this.get('selectedCustomer');
  var customer = App.Customer.find(selectedCustomer);
  model.set('customer', customer);
  model.set('dateOfOrder', new Date());
  model.save();

  this.transitionToRoute('orders');
}