0-belongs-to-select.md

Simple belongsTo select

This is the simplest version I could get working for a belongsTo association in a form select with EmberJS.

Ember.Select is now deprecated and should not be used.

The eq helper

It uses ember-truth-helpers to have the eq helper.

Notes

It is willingly coupled to the association name and attributes for simplicity but it could be made completely generic with a separated component and all ;-)

1-app.routes.post.edit.js

export default Ember.Route.extend({
  model() {
    return Ember.RSVP.hash({
      post: this.store.find('post', 1),
      categories: this.store.findAll('category')
    });
  },

  setupController(controller, model) {
    this._super(controller, model.post);
    controller.set('categories', model.categories);
  }
});

2-app.controllers.post.edit.js

export default Ember.Controller.extend({
  actions: {
    categoryChanged(categoryId) {
      let category = this.get('categories').findBy("id", categoryId);
      this.get("model").set("category", category);
    }
  }
});

3-app.templates.post.edit.hbs

<form>
  <select onchange={{action "categoryChanged" value="target.value"}}>
    {{#each categories as |category|}}
      <option value={{category.id}} selected={{eq category.id post.company.id)}}>
        {{category.name}}
      </option>
    {{/each}}
  </select>
</form>