Question

我正在使用带有把手的Ember.js，我需要在单击时在页面折叠/展开中创建一个div。我知道如何在jQuery中执行此操作，但我不能使用任何jQuery。有谁知道如何做到这一点？此外，我不想只是切换一个隐藏属性，我需要完全向上和向下滑动功能进行折叠。如果有人有任何想法，我真的很感激。

由于

Answer 1

单击您的视图将导致触发点击事件。您可以在视图中的单击事件处理程序中以任何方式编写动画代码：

CollapsableView = Ember.View.extend({
   click : function(event) {
      this.$().toggle('fast');
   }
})

Answer 2

我做了类似的事情，但树形结构。我之前在这里撰写了一篇关于此内容的博文：http://haagen-software.no/blog/post/2012-05-05-Ember_tree

它具有您需要的功能，因为它在单击节点时添加和删除DOM中的元素。

在我目前正在构建的应用中可以看到一个工作示例：https://github.com/joachimhs/EurekaJ/tree/netty-ember/EurekaJ.View/src/main/webapp

Answer 3

在Ember中这样做的正确方法是通过令人敬畏的Liquid Fire插件。

大纲：

将Liquid Fire安装到您的项目中。

定义这样的转换：

this.transition(
  this.hasClass('transition-spoiler'),
  this.toValue(true),
  this.use('toDown'),
  this.reverse('toUp')
);

在您的控制器/组件中，创建一个属性spoilerIsVisible和一个toggleSpoiler属性：

spoilerIsVisible: false,

actions: {
  toggleSpoiler: function() {
    this.toggleProperty('spoilerIsVisible');
  }
}

在您的页面/组件模板中，创建一个按钮和一个剧透包装器，如下所示：

<button {{action 'toggleSpoiler'}}>
  {{if spoilerIsVisible 'Show spoiler' 'Hide spoiler'}}
</button>

{{#liquid-if spoilerIsVisible class="transition-spoiler"}}
  <p>Dumbledore dies</p>
{{/liquid-if}}

请注意，您可以将步骤3-4包装到x-spoiler组件或其他内容中。

Ember可折叠容器

3 个答案: