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

我是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的过程？

感谢您的任何帮助 :-)

最佳答案

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文档以获取更多详细信息。

关于ember.js - classNameBindings到底在做什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34976844/