我在Ember应用程序中有一个表单,在添加服务器端验证反馈后开始变得有点难看,我尝试使用This link作为基础将其转换为组件
我当前的输入框如下所示:
<div class="form-group">
<label class="group-label">Message:</label>
{{textarea value=model.message classNames="group-control" placeholder="Message"}}
</div>
<div {{bind-attr class=":form-group model.errors.message:has-error"}}>
<label class="group-label">Message:</label>
{{input value=model.message classNames="group-control" placeholder="Message"}}
</div>
{{#if model.errors.message}}
<div class="group-errors">
{{#each error in model.errors.message}}
<div class="error">
{{error.message}}
</div>
{{/each}}
</div>
{{/if}}
我想将其转换为组件,这就是我目前所拥有的:
form-input.hbs
<div {{bind-attr class=":form-group hasError:has-error"}}>
<label class="group-label" {{bind-attr for=label}}>{{label}}</label>
{{yield}}
</div>
{{#if errors.length}}
<p>Errors</p>
<span class="help-block">
{{errors}}
</span>
{{/if}}
form-input_component.coffee
App.FormInputComponent = Ember.Component.extend
label: Em.computed 'for', ->
@get('for').underscore().replace(/_/g, " ").capitalize()
hasError: (->
@get('object.errors')?.has @get('for')
).property 'object.errors.[]'
errors: (->
return Ember.A() unless @get('object.errors')
@get('object.errors').errorsFor(@get('for')).mapBy('message').join(', ')
).property 'object.errors.[]'
这会正确显示输入字段但不会显示错误,我遗漏了一些内容,但我不确定它是什么。