What exactly classNameBindings is doing?

Question

I'm new to Ember and I'm following a tutorial which contains code for component:

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

I don't understand what classNameBindings is doing. From documentation I've learned that classNameBindings is a list of properties of the view to apply as class names, but I also have editing property on the component. How existence of this property effects this process of creating class names?

Thank you for any help :-)

Answer 1

classNameBindings has two modes of usage. You can either toggle the class on/off, or you can add/omit classes based on the value of a property.

Toggle the class on an off:

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

• this.set('editing', true) adds the editing CSS class to the element
• this.set('editing', false) removes the editing CSS class from the element

Add/omit classes based on the value of a property:

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

• this.set('editing', true) adds the is-editing CSS class to the element
• this.set('editing', false) adds the not-editing CSS class to the element

You can omit either the true ([editing::not-editing]) or the false ([editing:is-editing]) branches. You can consult the Customizing a Component's Element guide and the classNameBindings API documentation for more details.