Emberjs只有在触发观察者后才重新渲染组件

Question

我试图在窗体输入旁边显示错误。在目前的版本中，只要控制器中的fooErrors属性发生变化，它就会重新渲染页面。然而，它将整个视图都渲染出来，从而使视图中的标题混乱起来。有没有办法我只能重新渲染包含组件的视图部分？

的代码：

应用/视图/富/ form.js：

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

应用程序/控制器/富/ 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); 
     } 
     }); 
    } 
    } 
}); 

应用/模型/富.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> 

应用/模板/组件/形式error.hbs：

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

应用程序/组件/形式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() 
}); 

Answer 1

继OP设计，一个简单的刷新组件的方法是从视图中获取它并调用rerender。要从视图中获取组件，只需添加一个viewName。

例如，

HBS

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

JS

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