通过属性为组件添加CSS类 编辑页面

英文原文：http://emberjs.com/guides/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties

问题

希望基于组件属性添加和删除Ember组件CSS类名。

解决方案

添加属性名称到组件子类的classNameBindings属性。

讨论

可以基于组件属性应用CSS类，或通过绑定到传入组件的数据来实现。这是通过绑定元素的class属性到classNameBindings来实现的。

1
2

classNameBindings: ['active'],
active: true

同样也可以使用一个计算属性来设置CSS类名。

1
2
3
4

classNameBindings: ['isActive'],
isActive: function() {
  return 'active';
}.property('someAttribute')

其他能够将类名绑定到一个绑定属性的方法。

1
2

classNameBindings: ['isRelated:relative'],
isRelatedBinding: "content.isRelated" // value resolves to boolean

示例

JS Bin

查看自定义组件元素获取更多示例。