samedi 7 janvier 2017

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

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>


<label>Author</label>
<select>
  
    <option value="">
      
    </option>
  
</select>
<button type="submit">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?




Aucun commentaire:

Enregistrer un commentaire