ember.js - 将条件类名放入助手中

Question

如何将条件类名放入辅助/组件元素中？

像这样:我有 {{input}} 如果满足某些条件，则应该更改类名，我可以使用 if external 来做到这一点，

有办法制作这个衬垫吗？

{{#if model.bar.errors.name.length > 0}}
   {{input value=model.bar.name label='Bar Name' placeholder='The Name of Your Establishment' class=(model.bar.errors.name.length > 0 "color-" "blue")}}
{{#else}}
   {{input value=model.bar.name label='Bar Name' placeholder='The Name of Your Establishment' class="field-error"}}
{{/if}}

Answer 1

Ember 中的相关概念是类名绑定(bind)。

有多种方法可以将类或其他 html 属性的名称绑定(bind)到应用程序中的值:

1)模板中内联if语句:

<div class="{{if someVariable 'color-blue' 'not-color-blue}}">...</div>

2) 将 classNameBindings 属性传递给您的组件:

// htmlbars template
{{foo-bar  classNameBindings="isBlue:color-blue" model=model}}

//component.js
isBlue: Ember.computed(function(){
  return (this.get('model.color.name') === 'blue');
})  

3) 在你的 component.js 中(这是为组件设置默认类绑定(bind)的好方法——当与上面的 #2 结合使用时，模板中的类绑定(bind)将覆盖 component.js 中的类绑定(bind))文件):

//component.js
classNameBindings: ["isBlue:color-blue"],
isBlue: Ember.computed(function(){
  return (this.get('model.color.name') === 'blue');
}) 

选项 #2 和 #3 是最明智的方法。注意 classNameBindings 是一个数组。您可以使用此语法为元素指定任意数量的绑定(bind)。

文档:
http://guides.emberjs.com/v2.0.0/components/customizing-a-components-element/