Question

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

像这样：我有{{input}}如果满足某些条件，则应更改classname，如果在外面，我可以这样做，

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

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

Answer 2

是的，component.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}}

将条件类名放在帮助器中

2 个答案: