Emberjs 仅在视图中的观察者被触发后重新渲染组件答案

【问题标题】：Emberjs only rerender component after observer in view is triggeredEmberjs 仅在视图中的观察者被触发后重新渲染组件
【发布时间】：2014-11-26 22:47:26
【问题描述】：

我正在尝试在表单输入旁边显示错误。在当前版本中，只要控制器中的 fooErrors 属性发生更改，它就会重新呈现页面。但是，它会重新渲染整个视图，这会弄乱视图中的标题。有没有办法只能重新渲染包含组件的视图部分？

代码：

app/views/foo/form.js:

export default Ember.View.extend({
  errorsChanged: function() {
    this.rerender();
  }.observes('controller.fooErrors')
});

app/controllers/foo/edit.js：

export default Ember.ObjectController.extend(Ember.Validations.Mixin,{
  fooErrors: false,
  actions: {
    submit: function() {
      var _this = this;
      var foo = this.get('content');
      foo.validate().finally(function() {
        // form is submitted
        } else {
          foo.set('hasErrors', true);
          _this.set('fooErrors', true);
        }
      });
    }
  }
});

app/models/foo.js：

export default DS.Model.extend(Ember.Validations.Mixin, {
  hasErrors: false
}

app/foo/form.hbs:

<h1>{{fooId}}</h1>
<form>
{{input type="text" placeholder="foo id" valueBinding="fooId"}}{{form-error errors=fooErrors foo=model field="fooId"}}
<button {{action 'submit'}}>Submit</button>
</form>

app/templates/components/form-error.hbs：

{{#if errors}}
  <span>{{error}}</span>
{{/if}}

app/components/form-error.js:

export default Ember.Component.extend({
  tagName: 'span',
  classNames: ['error'],
  error: function() {
    var risk = this.risk,
        field = this.field;

    if (risk.get('hasErrors')) {
      return risk.get('errors').get(field);
    } else {
      return '';
    }
  }.property()
});

【问题讨论】：

为什么要重新渲染那个组件？

标签： javascript ember.js

【解决方案1】：

按照 OP 设计，仅刷新组件的一种简单方法是从视图中获取它并在其上调用 rerender。要从视图中获取组件，只需添加 viewName。

例如，

hbs

....{{form-error errors=fooErrors foo=model field="fooId" viewName="theErrorsCmp"}}

export default Ember.View.extend({
  errorsChanged: function() {
//if this fires for some reason at the very beginning before the view has been inserted to the DOM and the component is not yet available then just check before using it, i.e. uncomment the following line
//if(!Em.isEmpty(this.get("theErrorsCmp")))
    this.get("theErrorsCmp").rerender();
  }.observes('controller.fooErrors')
});

【讨论】：