如何在Ember中切换课程

Question

我试图找出如何切换组件中的类.

我的组件有两种状态:active和desactive.当我想要激活它时,我需要添加类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');
        }
    }
});

HBS

<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>