如何在不破坏关注点分离的情况下触发JQuery操作

Question

我使用SemanticUI和Ember，我想在点击一个按钮时让一些内容消失。

使用SemanticUI执行此操作的方法是调用$('#id').transition('type-of-transition')，id是要使其消失的元素的ID。

部分解决方案

将此代码放入控制器

我可以在控制器中创建一个调用$('#id').transition('type-of-transition')的动作。问题是控制器不应该知道视图。

使用<script>代码

我可以使用简单的旧方法（使用JQuery或普通JS设置事件），但它似乎不是＆＃34; Ember方式＆＃34;做事。

创建一个通用＆＃34; transition-element＆＃34;成分

我可以创建一个像

这样的组件

{{#transition-component shouldHide=shouldHide}}
<!-- Here comes what I want to make disappear -->
{{/transition-component}}

观察属性shouldHide，以便在切换到true时启动转换。问题是Ember会刷新DOM，因此视图会消失，但随后会重新出现。

任何解决方案？

Answer 1

您可以在组件上调用didInsertElement来指定转换。例如，在控制器上有一个我们可以切换的属性：

testBoolean: false;

然后采取行动：

  actions: {
    toggleBool() {
      set(this, 'testBool', !get(this, 'testBool'));
    }
  }

将您的组件包装在if：

中

{{#if testBool}}
  {{test-component}}
{{/if}}
<button {{action toggleBool on="click"}}>Click</button>

然后在您的组件上，指定所需的转换：

  didInsertElement: function(){
    this.$().hide().show('slow');
  }

或者你想要的任何jquery过渡。因此，通过单击按钮切换组件，插入组件时，每次都应调用didInsertElement。 （我个人并不熟悉SumanticUI，但我必须一直在Ember这样做。）