javascript - 如何在 Ember 中切换类

Question

我想弄清楚如何切换组件中的类。

我的组件有两种状态:事件状态和非事件状态。当我想激活它时，我需要添加 active 类。

目前我正在使用 jQuery addClass 和 removeClass。

组件.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');
    },
  }
});

它正在运行，但我感觉 Ember 内置了一些有助于实现这一点的东西。

Answer 1

或者你可以做

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

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

血红蛋白

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