classNameBindings到底在做什么？

Question

我是新来的灰烬，我下面包含的代码组件教程：

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类元素

您可以省略真（[editing::not-editing]）或假（[editing:is-editing]）分公司。有关更多详细信息，请参阅Customizing a Component's Element guide和classNameBindings API文档。