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)将editingCSS类添加到元素中
• this.set('editing', false)editing从元素中删除CSS类

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

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

• this.set('editing', true)将is-editingCSS类添加到元素中
• this.set('editing', false)将not-editingCSS类添加到元素中

您可以省略true([editing::not-editing])或false([editing:is-editing])分支.有关更多详细信息,请参阅自定义组件的元素指南和classNameBindingsAPI文档.