将条件类名放在帮助器中

Question

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

像这样:我有{{input}}如果满足某些条件,它的类名应该被改变,我可以这样做,如果在外面,

无论如何要制作这个衬垫？

{{#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中的相关概念是类名绑定.

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

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中(这是为组件设置默认类绑定的好方法 - 当与上面的#2结合使用时,模板中的类绑定将覆盖component.js文件中的类绑定):

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

选项#2和#3是最安全的方法.注意classNameBindings是一个数组.您可以使用此语法为元素指定任意数量的绑定.

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