The correct way to fill in Ember.Select

Question

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

http://jsbin.com/ibazom/4 (update after Darshan's first comments)

Each order must be bound to a client, and I know that I need to fill out a property (suitable clients) to bind to Ember.Select, but I don’t quite know where to do it.

Then I need to update the order / new template with

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

I also get an error when sending / orders that I cannot understand

 TypeError: Cannot read property 'length' of null 

Update: App.Order.FIXTURES =[]; bug fixed above.

cross post from http://discuss.emberjs.com/t/proper-way-to-populate-ember-select/1611

Answer 1

You can use needs to declare that your OrdersNewController requires a customers controller. In addition, create a property to easily communicate with this controller.

 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, for example selectedCustomer , so that you can use it when saving a record.

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

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

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

Finally, in createUser the transitionTo method is deprecated. Instead, you want to use transitionToRoute .

 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'); } 

Here is the updated jsbin