Ember.js 为什么模板上没有显示错误？

参考

我有一个路由

checkout.address

，它呈现

app/templates/checkout/address.hbs

。它具有以下特点：

两种形式

一个表单，允许用户创建新的 地址

每个现有地址的表单，以便用户可以编辑 他们

当我尝试创建或更新地址时，使用无效值。由于API返回验证错误，应用程序会投诉。这是意料之中的。Ember Inspector中的

网络

选项卡确认API以以下形式返回错误：

errors: Object
  street: Array
    0: can't be blank

但是，错误不会显示在两个窗体上。我希望下面这行可以做到这一点：

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

{{{#errors.street中的每个错误}

{{error.message}
{{/每个}}

我做错了什么

守则：

// app/router.js
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('checkout', function() {
    this.route('address');
  });
});

export default Router;

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

// export default Ember.ArrayController.extend({
export default Ember.ObjectController.extend({
  actions: {
    create: function() {
      var _this = this;

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

    update: function(address) {
      var _this = this;

      address.set("street", address.get('street'));

      address.save().then(function(){
        _this.transitionToRoute('checkout.address');
      }, function() {
        console.log('here');
        // Need this promise, so we can render errors, if any, in the form
      });

      return false;
    }
  }
});

// app/templates/checkout/address.hbs
<h1>Addresses</h1>

<p>Create address:</p>

<form {{action "create" on="submit"}}>
  <p>
    <label>Street:
      {{input value=street placeholder="Foo street"}}
    </label>

    {{#each error in errors.street}}
      <br />{{error.message}}
    {{/each}}
  </p>
  <input type="submit" value="Create"/>
</form>

<ul>
  {{#each model}}
  <li>
    Address: {{street}}

    <form {{action "update" this on="submit"}}>
        <label>street:
          {{input value=street placeholder="Foo Street"}}
        </label>

        {{#each error in errors.street}}
          <br />{{error.message}}
        {{/each}}
      </p>
      <input type="submit" value="Update"/>
    </form>
  </li>
  {{/each}}
</ul>

//app/router.js
从“余烬”导入余烬；
从“/config/environment”导入配置；
var Router=Ember.Router.extend({
位置：config.locationType
});
Router.map（函数（）{
this.route（'checkout'，function（）{
这条路线（“地址”）；
});
});
导出默认路由器；
//app/controllers/checkout/address.js
从“余烬”导入余烬；
//导出默认值Ember.ArrayController.extend({
导出默认Ember.ObjectController.extend({
行动：{
创建：函数（）{
var_this=这个；
//this.get（'model'）.save（）.then（函数（地址）{
this.store.createRecord（'地址'{
街道：这个。得到（‘街道’）
}).save（）.then（函数（地址）{
//address.save（）.then（函数（地址）{
_这个.transitionRoute（'addresses.index'，address）；
}，函数（错误）{
//console.log（错误）；
//需要这个承诺，这样我们就可以在表单中呈现错误（如果有）
//console.log（'error'）；
});
},
更新：功能（地址）{
var_this=这个；
address.set（“街道”，address.get（“街道”）；
address.save（）.then（函数（））{
_此.transitionRoute（'checkout.address'）；
}，函数（）{
console.log（'here'）；
//需要这个承诺，这样我们就可以在表单中呈现错误（如果有）
});
返回false；
}
}
});
//app/templates/checkout/address.hbs
地址
创建地址：


街道：
{{input value=street placeholder=“Foo street”}
{{{#错误中的每个错误。街道}

{{error.message}
{{/每个}}


{{{#每个模型}

地址：{街道}
街道：
{{input value=street placeholder=“Foo street”}
{{{#错误中的每个错误。街道}

{{error.message}
{{/每个}}


{{/每个}}

首先，您使用的是哪个适配器？DS。ActiveRecordsAdapter中的默认错误工作。如果您使用的是RESTAdapter，则必须先实现它

我认为您需要将错误设置为控制器上的属性。请尝试执行以下操作：

this.set('errors',errors);

---

在save返回的承诺的错误处理程序中。

hmm-它应该可以工作了……你能把它扔进jsbin吗？我认为这就是问题所在。

create

操作不会在路由的模型钩子中运行。这样做

{{{{模型中的每个错误.errors.street}

或

{{错误中的每个错误.street}

不在模板中执行任何操作