Ember.js 将条件类名放入helper中

如何将条件类名放入helper/component元素中

这样：我有{{input}}如果满足某个条件，它的类名应该被更改，我可以用if-outside来做

有没有办法做这一行

{{#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}}

---

是的，使用

组件.js中的计算属性：

//component.js
valueClass:Ember.computed(function(){
  if(this.get('model.bar.errors.name.length') > 0){
    return "color-blue";
  } else {
    return "field-error";
  }
})



//component.hbs
  {{input value=model.bar.name label='Bar Name' placeholder='The Name of Your Establishment' class=valueClass}}

Ember中的相关概念是类名绑定

有多种方法可以处理将类或其他html属性的名称绑定到应用程序中的值：

1） 模板中的内联if语句：

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

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

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

文档：

这是假设您正在使用一个组件。如果您想有条件地将类添加到
li
或普通html标记

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

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

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