Ember.js - add record request has blank parameters

Question

I am using ember-cli with a Rails API backend and am having some issues adding a new record.

I've set up the form and route and am able to retrieve the values from the form, but the save() does not pass these values back to the POST request for Rails, resulting in a blank record being created.

I would appreciate any assistance at all.

Adapter application.js:

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  namespace: 'api'
});

Route:

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    //return this.store.createRecord('book');
    return {};
  },

  actions: {
    saveBook(newBook) {
      var curr = this.store.createRecord('book', {
        title: newBook.title,
        author: newBook.author,
        genre: newBook.genre
      });
      alert("curr.title = " + curr.title);
      curr.save();
      this.transitionTo('books');
    },
  }
});

Template:

<h2>Add Book</h2>

<div class="layout-row">
  {{!-- {{book-form model=model buttonLabel="Add Book" action='saveBook'}} --}}
  <div class="form-horizontal">
    <div class="layout-row">
      <div class="layout-column flex-200">
      {{paper-input label="Title" value=model.title onChange=(action (mut model.title))}}
      </div>
    </div>
    <div class="layout-row">
      <div class="layout-column flex-200">
      {{paper-input label="Author" value=model.author onChange=(action (mut model.author))}}
      </div>
    </div>
    <div class="layout-row">
      <div class="layout-column flex-200">
      {{paper-input label="Genre" value=model.genre onChange=(action (mut model.genre))}}
      </div>
    </div>
    <div class="layout-row">
      <button type="submit" {{action "saveBook" model}}>Save</button>
    </div>
  </div>
</div>

Browser result using Ember Inspector:

{"data":{"id":"31","type":"books","attributes":{"title":null,"author":null,"genre":null}}}

You have included the payload of your APIs response, isn't it? Would be helpful to see the payload of your client request to ensure that it's not a backend issue. Also it would be helpful to know what the value of newBook passed to saveBook action is. Hard to tell if it's an issue with paper-input or book-form component otherwise. — jelhan
Are you sure? You must have a very uncommon way of generating client-side IDs If this payload is from the client request (and not from the server reponse). ID 31 looks like an auto incremented ID applied your server not like a client-side generated ID, which is usually a GUID. — jelhan
@jelhan you are correct...that is not the client request. I'm not sure how to locate the correct value...can you give me a tip? — Brad Stammers
Further investigation has revealed that the client request does in fact contain the correct values. The issue is now that those parameters are not passed to or accepted by Rails at all. — Brad Stammers

chris vdp chris vdp · Accepted Answer · 2019-04-24T21:39:02

I prefer adding the action to a form on submit action as then your form will submit when enter or save are pressed.

<h2>Add Book</h2>

<div class="layout-row">

  <form class="form-horizontal" {{action "saveBook" on="submit"}}>
    <div class="layout-row">
      <div class="layout-column flex-200">
      {{paper-input label="Title" value=model.title onChange=(action (mut model.title))}}
      </div>
    </div>
    <div class="layout-row">
      <div class="layout-column flex-200">
      {{paper-input label="Author" value=model.author onChange=(action (mut model.author))}}
      </div>
    </div>
    <div class="layout-row">
      <div class="layout-column flex-200">
      {{paper-input label="Genre" value=model.genre onChange=(action (mut model.genre))}}
      </div>
    </div>
    <div class="layout-row">
      <button type="submit">Save</button>
    </div>
  </form>
</div>

Route:

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return this.store.createRecord('book');
  }
});

Controller:

import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    saveBook() {
      this.model.save().then(() => {
        this.transitionTo('books');
      });
    }
  }
});

Ember.js - add record request has blank parameters

1 Answers