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

Question

我使用 SemanticUI 和 Ember，我想在单击按钮时让一些内容随着过渡消失。

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

部分解决方案

将此代码放入控制器

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

使用 <script> 标签

我可以使用普通的旧方法（使用 JQuery 或在普通 JS 中设置事件），但它似乎不是 "Ember way" 做事的方式。

创建通用 "transition-element" 组件

我可以创建一个像这样的组件：

{{#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 中做这样的事情）。