Ember Data belongsTo with Select dropdown view

Question

I am trying to do something pretty basic with Ember and Ember Data.

1) Posts belongsTo Users; Users hasMany Posts

2) In the create new Post form, I want to have a select/dropdown of all Users

3) When I edit a post (using the same form), I want to bind it correctly back to the dropbox

Question: What is the best practice to do the dropdown that binds to the list of users? How can I bind the edit form to populate the dropdown again?

User Model:

App.User = DS.Model.extend({
  posts: DS.hasMany('post', {async: true}),
});

Post Model:

App.Post = DS.Model.extend(Ember.Validations.Mixin, {
  user: DS.belongsTo('user', {async: true}),
});

Create New Post Form:

{{view Em.Select
  content=users <<<<< How do I bind this.store.find("user") here?
  optionValuePath='content.id'
  optionLabelPath='content.name'
}}

I don't understand the best practice to bind the select content with users.

Attempt 1:

*I am using Ember-Form

  {{em-select
    property="user_id"
    label="user"
    prompt="Select user:"
    content=controllers.users.content
    optionValuePath="content.id"
    optionLabelPath="content.first_name"
  }}

And on the save action:

newItem.set('user', this.store.getById('user', this.get('user_id')));

I tried to use user_id as my property for the form, and translate back to a user object to assign to the post when I save. However, this method is kind of stupid because I am actively translating user_id to user object every time I save. I feel like there should be a way that that is done automatically if I did the correct binding, instead of jumping through hoops to bind the property as user_id. This also makes it hard for me to bind back when I use the same form for editing the post. Since all the relationship has been setup, I have a feeling that I am doing something wrong here. I think there must be a better way.

Thanks!

Answer 1

As of September 2014 there is an issue with Ember.Select plus { async: true }. They don't play well together.

myModel.get('myAsyncRel') will return a promise, Ember.Select is not promise aware, so it cannot handle this properly.

One workaround is to use a non-async relationship.

• https://github.com/emberjs/data/issues/1405
• https://github.com/emberjs/data/issues/2111

Another workaround is to use something like this:

• http://emberjs.jsbin.com/rwjblue/43/edit?html,css,js,output

Answer 2

The ember team has opened an issue (#5259) for this problem, they are planning to rewrite the whole Ember.Select part.

In the meantime you can use this Add-on from thefrontside:

{{#x-select value=bob action="selectPerson"}}
  {{#x-option value=fred}}Fred Flintstone{{/x-option}}
  {{#x-option value=bob}}Bob Newhart{{/x-option}}
{{/x-select}}

Install it with ember install emberx-select

---

EDIT As Stefan Penner wrote, you can now use the ember select as follows (jsbin):

<select onchange={{action "changed" value="target.value"}}>
    {{#each model.choices key="@identity" as |choice|}}
      <option value={{choice}} selected={{is-equal currentValue choice}}>{{choice}}</option>
    {{/each}}
</select>