ember.js - classNameBindings 到底在做什么？

Question

我是 Ember 的新手，我正在学习包含组件代码的教程:

export default Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['editing'],
  editing: false,
  actions: {
    editTodo() {
      this.toggleProperty('editing');
    }
  }
});

我不明白什么 classNameBindings是在做。从文档中我了解到 classNameBindings is a list of properties of the view to apply as class names ，但我也有 editing组件上的属性。此属性的存在如何影响此创建过程 class names ?

感谢您的任何帮助 :-)

Answer 1

classNameBindings有两种使用模式。您可以打开/关闭类，也可以根据属性的值添加/省略类。

关闭类(class):

export default Ember.Component.extend({
  classNameBindings: ['editing']
});

this.set('editing', true)添加 editing元素的 CSS 类

this.set('editing', false)删除 editing来自元素的 CSS 类

根据属性值添加/省略类:

export default Ember.Component.extend({
  classNameBindings: ['editing:is-editing:not-editing']
}

this.set('editing', true)添加 is-editing元素的 CSS 类

this.set('editing', false)添加 not-editing元素的 CSS 类

您可以省略 true ( [editing::not-editing] ) 或 false ( [editing:is-editing] ) 分支。您可以咨询 Customizing a Component's Element guide和 classNameBindings API 文档了解更多详情。