Javascript 仅在触发视图中的观察者后重新渲染组件

Javascript 仅在触发视图中的观察者后重新渲染组件,javascript,ember.js,Javascript,Ember.js,我试图在表单输入旁边显示错误。在其当前版本中,每当控制器中的fooErrors属性发生更改时,它都会重新启动页面。但是,它会重新渲染整个视图,这会弄乱视图中的标题。有没有办法只重新渲染视图中包含组件的部分 守则: app/views/foo/form.js: export default Ember.View.extend({ errorsChanged: function() { this.rerender(); }.observes('controller.fooErrors

我试图在表单输入旁边显示错误。在其当前版本中,每当控制器中的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>

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

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

为什么要重新启动该组件?