Ember.js - 添加记录请求具有空白参数

Question

我正在使用带有Rails API后端的ember-cli，并且在添加新记录时遇到了一些问题。

我已经设置了表单和路由，并且能够从表单中检索值，但是 save(( 不会将这些值传递回 Rails 的 POST 请求，从而导致创建空白记录。

我将不胜感激任何帮助。

适配器应用.js：

import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
  namespace: 'api'
});

路线：

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');
    },
  }
});

模板：

<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>

使用 Ember Inspector 的瀏覽器結果：

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

Answer 1

我更喜欢在提交操作时将操作添加到表单中，因为当您按下输入或保存时，您的表单将提交。

<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>

路线：

import Route from '@ember/routing/route';
export default Route.extend({
  model() {
    return this.store.createRecord('book');
  }
});

控制器：

import Controller from '@ember/controller';
export default Controller.extend({
  actions: {
    saveBook() {
      this.model.save().then(() => {
        this.transitionTo('books');
      });
    }
  }
});