How do I setup Ember-CLI belongsTo dropdown?

Question

I am having issues saving a belongsTo relationship in Ember-CLI using Ember Data. I have a contact model that belongs to a client model. Here are the models:

// models/contact.js

import DS from 'ember-data';

var Contact = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    title: DS.attr('string'),
    email: DS.attr('string'),
    phone: DS.attr('string'),
    client: DS.belongsTo('client', {async: true}),
});


export default Contact;


// models/client.js
import DS from 'ember-data';

var Client = DS.Model.extend({
    name: DS.attr('string'),
    phone: DS.attr('string'),
    email: DS.attr('string'),
    summary: DS.attr('string'),
    contacts: DS.hasMany('contact', {async: true}), 
});

export default Client;

Here is my template:

<form {{action "save" on="submit"}}>

{{view "select" 
        contentBinding=model.client
        optionLabelPath="content.name"
        optionValuePath="content.id"
        selectionBinding="contact.client.content" }}
  <div>
    <label>
      First name
      {{input type="text" value=model.firstName}}
    </label>
  </div>
  <div>
    <label>
      Last name
      {{input type="text" value=model.lastName}}
    </label>
  </div>
  <div>
    <label>
      Title
      {{input type="text" value=model.title}}
    </label>
  </div>
  <div>
    <label>
      Email
      {{input type="text" value=model.email}}
    </label>
  </div>
  <div>
    <label>
      Phone
      {{input type="text" value=model.phone}}
    </label>
  </div>
  <div>
    <input type="submit" value="Save">
  </div>
</form>

This is the save mixin for this model:

import Ember from 'ember';

export default Ember.Mixin.create({
  actions: {
    save: function() {
      var route = this;
      var client = this.client;
      console.log(client)
      this.currentModel.save('contact', {client: client}).then(function() {
        route.transitionTo('contacts');
      }, function() {
        console.log('Failed to save the model');
      });
    }
  },
  deactivate: function() {
    if (this.currentModel.get('isNew')) {
      this.currentModel.deleteRecord();
    } else {
      this.currentModel.rollback();
    }
  }
});

I'm currently getting undefined from the console.log(client) and an Uncaught TypeError: this.currentModel.save is not a function from the line following.

As best I can tell, I'm having issues passing the selected client from the dropdown to the save mixin...

Any help/ideas would be much appreciated!

Answer 1

Here's what I ended up doing... I created a view for this function, as follows:

import Ember from 'ember';

    export default Ember.Route.extend( {
      selectedClient: [],
      afterModel : function() {
        var _this = this;
        return this.store.find('client').then(function(result) {
          _this.set('selectedClient', result);
        });
      },
      model : function() {
        return this.store.createRecord('contact');
      },
      setupController: function(controller, model) {
        this._super(controller, model);
        controller.set('clients', this.get('selectedClient'));
      }
    });

I had to move the save function to a controller:

    //contacts/new.js
import Ember from 'ember';

export default Ember.ObjectController.extend({
    selectedClient: [],
    actions: {
      save: function() {
        var route = this;
        var client = this.get('client');
        // console.log(this.get('client').get('id'));
        this.model.set('client', client).save().then(function() {
          route.transitionTo('contacts');
        }, function() {
          console.log('Failed to save the model');
        });
      }
    },
    deactivate: function() {
      if (this.currentModel.get('isNew')) {
        this.currentModel.deleteRecord();
      } else {
        this.currentModel.rollback();
      }
    }
});

Notice the updated save function... I had to add .set('client', client) to actually assign the relationship before the contact is saved.

Here are a couple links that were helpful in assisting me in finding a working solution: http://jsbin.com/kopagacezi/21/edit?html,js,output

http://discuss.emberjs.com/t/update-belongsto-relation-from-dropdown-ember-select-view/7609

All up and running now.