Ember-data: Saving parent to child via a select box

Question

I've went over a lot of examples both here on SO and in some guides/blogs. Nothing seems to work.

I have a customer that hasMany loads

currently the code is:

route

export default Ember.Route.extend({
  setupController: function(controller, model) {
  controller.setProperties(model);
},
model: function() {
return Ember.RSVP.hash({
    content: this.store.createRecord('truck-load'),
    customerList: this.store.findAll('customer'),
    equipmentList: this.store.findAll('equipment-list')
  });
},
resetController(controller, isExisting) {
  if (isExisting) {
    var model = controller.get('model');
    if (model.get('isNew')) {
      model.destroyRecord();
    }
   }
  }
});

select box in the template - materialize add on for ember-cli

{{md-select content=customerList
 value=model.customer
 label="Customer"
 prompt="Please Choose a Customer..."
 optionLabelPath='content.name'
 optionValuePath='content.id'}}

Current controller - I've tried this many ways

export default Ember.Controller.extend({
   actions: {
     save() {
       var truckload = this.get('model');
       this.get('model.customer').then((customer) => {
         truckload.set('customer', customer);
         truckload.save().then((load) => {
           this.get('notify').success('Truck Load Created');
           this.transitionToRoute('truck-loads.show', load.id);
         });
       });

JSON for my JSON-API server running Elixir/Phoenix

  Parameters: %{"data" => %{"attributes" => %{"pro_number" => "423432", "special" => nil, "status" => nil}, 
  "relationships" => %{"customer" => %{"data" => nil}, 
  "equipment_list" => %{"data" => nil}}} }

customer (and equipment-list) are both coming over nil.

You are not calling super in setupController, so model should be undefined. Furthermore you are doing model.customer but there is no customer key in the hash returned from the model hook. — locks
model is not undefined per Ember Inspector. Inspector also shows model.customer and the getter/setter functions as well as the customer is a belongsTo promise object. — Richard Holland

Richard Holland Richard Holland · Accepted Answer · 2015-11-17T23:50:36

This fixed it.

1) Settings the drop down result as a controller property 2) Accessing this to lookup the model and set it.

selectedCustomer: null,
selectedEquipment: null,
actions: {
  save() {
    var truckload    = this.get('model');
    var customer_id  = this.get('selectedCustomer');
    var equipment_id = this.get('selectedEquipment')
    this.store.findRecord('customer', customer_id).then((customer) => {
      truckload.set('customer', customer);
         this.store.findRecord('equipmentList',equipment_id).then((equipment) => {
           truckload.set('equipmentList', equipment);
           truckload.save().then((load) => {
             this.get('notify').success('Truck Load Created');
             this.transitionToRoute('truck-loads.show', load.id);
           });
         });
       });

  return false;
},

I doubt this is the best way to do it - but - it DOES work.

Ember-data: Saving parent to child via a select box

1 Answers