如何在 Ember 中切换类

Question

我正在尝试弄清楚如何在组件中切换类。

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

目前我正在使用 jQuery addClass 和 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');
    },
  }
});

它正在工作，但我感觉 Ember 有一些内置的东西可以帮助解决这个问题。

Answer 1

或者你可以这样做

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

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

血红蛋白

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

Answer 2

请参阅 Ember 在 Templates: Conditionals 上的文档。本质上，条件允许您在模板中使用表达式以及在组件/控制器中声明的变量。因此，您可以执行以下操作，而不是访问组件/控制器中的 DOM（这不是 Ember 的处理方式）：

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>