Get the value from select form in EmberJS and ember-data

Question

I am new in Ember and I am creating an App with some models relationships.

These are my models

// models/user.js
export default DS.Model.extend({
  name: DS.attr('string'),
  role: DS.belongsTo('role')
});

// models/role.js
export default DS.Model.extend({
  name: DS.attr('string'),
  description: DS.attr('string')
});

My new user route is

import Ember from 'ember';

export default Ember.Route.extend({

  model: function(){
    return Ember.RSVP.hash({
      newUser: this.store.createRecord('user'),
      roles: this.store.findAll('role'),
    });
  }
});

The idea is get the roles and selecting in a select view in the form

This is my template for create a new User

<form {{ action "save" on="submit" }}>
  {{ input value=newApplicant.name class="form-control" }}
  <select name="role" class="form-control" value="role.value">
       {{#each model.roles as |role|}}
             <option value="{{role.id}}">{{role.name}}</option>
       {{/each}}
  </select>

Until this step all is OK, I have my select with the proper data, but I want to save I do not know how to get the role id from the form and insert to the user

This is my new controller

import Ember from 'ember';

export default Ember.Controller.extend({

newUser: Ember.computed.alias('model.newUser'),
roles: null,
// roles: Ember.computed.alias('model.roles'),


actions: {
  save() {
    var role = this.get('role.value');
    console.log(role);
    //this.get('newUser').save().then((user) =>
    //  this.transitionToRoute('users', user.get('id'))
    //);
  },
});

I have done some experiments but nothing has working. When I click in Save send in the JSON request to the server a null value in role.

I have follow this tutorial http://thau.me/2014/11/ember-data-mastering-async-relationships-part-2/

But when I try to filter I got Null.

How can obtain the value from the select form? What is the best way to do this?

BTW, I am using Ember 2 and ember data 2

Answer 1

You'll need to update a fews thing in order for that to work.

See this twiddle for a full reference.

On the template side, the select tag needs to send the value on the change event. I've removed the value="" and replaced it with a onchange event.

<select name="role" class="form-control" onchange={{action "updateValue" value="target.value"}}>
 {{#each model.roles as |role|}}
  <option value="{{role.id}}">{{role.name}}</option>
 {{/each}}
</select>

Then you need an action in your controller to deal with this, the updateValue action will receive the value from the select box and set it to the role.value property, which you can retrieve later on the save action:

actions:{
  updateValue: function(value) {
    this.set('role.value', value);
  },
  save() {
   var role = this.get('role.value');
   console.log(role); // Now this should work
  }
}

I don't think the select tag has a value property.

In essence the issue was that your select tag was not binding it's value anywhere. For a more powerful select component, I highly recommend ember-power-select.