提交表单会向 API 发送空白值，为什么？

Question

在将 Pod 与我的资源之一 address 集成后。一切似乎都很好，除非我在app/checkout/address/new/template.js 中提交表单（具有有效值）。

我在 Ember Inspector 的控制台选项卡中收到 POST http://localhost:4099/api/v1/addresses。网络选项卡表明它向 API 发送了空白值。

我做错了什么？

// app/checkout/address/new/route.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.createRecord('address');
  }
});

// app/checkout/address/base/controller.js
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save: function() {
      var _this = this;

      // this.store.createRecord('product').save().then(function(product){
      this.get('model').save().then(function(address){
        _this.transitionToRoute('checkout.addresses.index');
      }, function() {
        console.log('error');
        // Need this promise, so we can render errors, if any, in the form
      });

      return false;
    },
    cancel: function() {
      return true;
    }
  }
});

// app/checkout/address/new/controller.js
import AddressBaseController from '../base/controller';

export default AddressBaseController.extend({
  actions: {
    cancel: function() {
      this.store.unloadAll('address');
      this.transitionToRoute('checkout.address.index');

      return false;
    }
  }
});

// app/checkout/address/new/template.js
<h1>Add new address</h1>

<form {{action "save" on="submit"}}>
  <p>
    <label>First name:
      {{input value=firstName}}
    </label>

    {{#each error in errors.firstName}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Last name:
      {{input value=lastName}}
    </label>

    {{#each error in errors.lastName}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Address:
      {{input value=address1 placeholder="Foo Street"}}
    </label>

    {{#each error in errors.address1}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    {{input value=address2 placeholder="Bar"}}

    {{#each error in errors.address2}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>City:
      {{input value=city placeholder="New York"}}
    </label>

    {{#each error in errors.city}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Postal code:
      {{input value=postalCode placeholder="213213"}}
    </label>

    {{#each error in errors.postalCode}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Contact number:
      {{input value=contactNumber placeholder="8888 8888 888"}}
    </label>

    {{#each error in errors.contactNumber}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <p>
    <label>Instructions (optional):
      {{textarea value=instructions placeholder="Lorem ipsum dolor"}}
    </label>

    {{#each error in errors.instructions}}
      <br />{{error.message}}
    {{/each}}
  </p>

  <input type="submit" value="Next"/>
  <button {{action "cancel"}}>Cancel</button>
</form>

{{outlet}}

Answer 1

您需要在模板中的值之前添加model，否则使用ObjectController，不推荐使用，因为在Ember 2.0 中是going away。

<label>
  First name:
  {{input value=model.firstName}}
</label>