What exactly does the NameBindings class do?

Question

I am new to Ember and I am following a tutorial containing the code for the component:

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

I do not understand what is doing classNameBindings. I learned from the documentation that classNameBindings is a list of properties of the view to apply as class names, but I also have a property editingon the component. How does the existence of this property affect this creation process class names?

Thanks for any help :-)

Answer 1

classNameBindingshas two modes of use. You can either toggle the class on / off, or add / omit classes based on the value of the property.

Toggle class off:

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

• this.set('editing', true)adds a editingCSS class to an element
• this.set('editing', false)removes a editingCSS class from an element

Add / omit classes based on property value:

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

• this.set('editing', true)adds a is-editingCSS class to an element
• this.set('editing', false)adds a not-editingCSS class to an element

([editing::not-editing]), ([editing:is-editing]) . " " classNameBindings API .