Ember.js belongsTo relationship create/edit in select element (dropdown)

Question

I'm attempting to set the belongsTo relationship using a dropdown.

So I have my Books model:

import DS from 'ember-data';

export default DS.Model.extend({
  // Relationships
  author: DS.belongsTo('author'),
  name: DS.attr()
});

And my Author model:

import DS from 'ember-data';

export default DS.Model.extend({
  // Relationships
  author: DS.hasMany('books'),
  name: DS.attr()
});

My Books/new route:

import Ember from 'ember';

export default Ember.Route.extend({

  model() {
    return Ember.RSVP.hash({
      book: this.store.createRecord('book'),
      authors: this.store.findAll('author')
    })
  },

  actions: {

    saveBook(newBook) {
      newBook.book.save().then(() => this.transitionTo('book'));

    },

    willTransition() {
      this.controller.get('book').rollbackAttributes();
    }
  }
});

And my Books/new template:

<label >Book Name</label>
{{input type="text" value=model.name placeholder="Book Name"}}

<label>Author</label>
<select>
  {{#each model.authors as |author|}}
    <option value="{{author.id}}">
      {{author.name}}
    </option>
  {{/each}}
</select>
<button type="submit"{{action 'saveBook' model}}>Add Book</button>

If I remove the select element and just save the name of the book it works fine, but with it I get this: (where id is an auto-generated ID)

Error: Some errors were encountered while saving app@model:book id
at reportError (firebase.js:425)
at firebase.js:445
at tryCatch (ember.debug.js:58165)
at invokeCallback (ember.debug.js:58177)
at publish (ember.debug.js:58148)
at publishRejection (ember.debug.js:58091)
at ember.debug.js:37633
at invoke (ember.debug.js:339)
at Queue.flush (ember.debug.js:407)
at DeferredActionQueues.flush (ember.debug.js:531)

I think I need to do something like getting the author object and setting book.author to that, but I can't find a clear explanation of how. Especially as I can't even work out how to get the data from that select menu in the route!

I feel like I'm missing something pretty simple here, anyone have any insight?

Answer 1

I would suggest moving this functionality to your controller.js where it belongs. Why is your relation to books in AuthorModel called author instead of books ? I would suggest rewriting your action (in the controller) to something like this:

saveBook(newBook) {
  newBook.set('author', this.get('selectedAuthor') // or just the call below if you go with the alternative below
  newBook.save().then(() => this.transitionTo('book'));

},

Now the problem persists, that you don't have a binding to your selected author. I would suggest using something like ember-power-select to bind your selected author to a controller property.

Then you would do this in your template:

{{#power-select
    placeholder="Please select Author"
    onchange=(action "authorSelectionChanged")
    options=model.authors
    as |author|}}
    {{author.name}}
{{/power-select}}

And in your actions within your controller:

authorSelectionChanged(author) {
    this.get('model.book').set('author', author);
    // or the following if you go with the alternative above
    this.set('selectedAuthor', author);
}