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有两种使用模式。您可以打开/关闭班级，也可以根据属性的值添加/省略班级。

关闭课程：

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文档。