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

请参阅Templates: Conditionals上的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>

如何在Ember中切换课程

2 个答案: