Javascript 如何在Ember中切换类

我想知道如何在组件中切换类

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

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内置了一些东西，可以帮助实现这一点。

请参阅Ember关于的文档。基本上，条件允许您在模板中使用表达式，并在组件/控制器中声明变量。因此，您可以执行以下操作，而不是访问组件/控制器中的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>

...

或者您可以这样做

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

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

哈佛商学院

...

如果这些组件是一堆框，如果其中一个处于活动状态，我想隐藏其他组件，那该怎么办？您可以选择自己的模板帮助器，或者使用类似的工具，为您提供更强大的条件。还有一个疑问。。我不应该在控制器中使用这个吗？并且仅使用组件发送操作？控制器只应处理视图的显示逻辑。对于更通用的逻辑控件，首选模板帮助程序。@celoxxx在控制器使用方面：另外，如果您想要更快更详细的入门帮助，请加入ember社区：

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