How to switch a class in Ember

Question

I am trying to figure out how I can switch a class in a component.

I have my component, which has two states: active and deactivated. When I want to activate it, I need to add a class active.

I am currently using jQuery addClassand removeClass.

Component.js:

SiteApp.BookingBoxComponent = Ember.Component.extend({
      actions: {
        open: function (element) {
          this.sendAction('open', this.$());
        },

        close: function (element) {
          this.sendAction('close', this.$());
        },
      }
});

Controller.js:

SiteApp.IndexController = Ember.Controller.extend({
  actions: {
    open: function (element) {
      element.addClass('event--active');
    },

    close: function (element) {
      element.removeClass('event--active');
    },
  }
});

It works, but I have a feeling that Ember has something to help with this.

Answer 1

. Ember : . , /. , DOM / ( Ember-way), :

App.AComponent = Ember.Component.extend({
    isOpen: false,

    actions: {
        open: function (element) {
            this.set('isOpen', true);
        },

        close: function (element) {
            this.set('isOpen', false);
        }
    }
});

:

<div class="{{if isOpen "event--active"}}">
    ...
</div>

Answer 2

App.AComponent = Ember.Component.extend({
    isOpen: false,

    actions: {
        toggleOpen: function (element) {
            this.toggleProperty('isOpen');
        }
    }
});

Hbs

<div class="{{if isOpen 'opened' 'closed'}}">
    ...
</div>