3

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

谢谢

4

3 回答 3

2

单击您的视图将导致触发单击事件。您可以在视图中的单击事件处理程序中以任何您想要的方式对动画进行编码：

CollapsableView = Ember.View.extend({
   click : function(event) {
      this.$().toggle('fast');
   }
})
于 2012-09-04T14:44:35.063 回答
1

在 Ember 中执行此操作的正确方法是通过出色的Liquid Fire插件。

大纲：

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

  2. 像这样定义一个过渡：

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

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

    spoilerIsVisible: false,

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

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

    <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组件或其他东西中。

于 2015-05-14T14:00:34.660 回答
0

我做了类似的事情，但使用了树结构。我以前在这里写过一篇关于这个的博客文章：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

于 2012-09-04T15:25:19.990 回答