Ember可摺疊容器

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

在灰燼這樣做的正確方法是通過真棒Liquid Fire插件。

綱：

1. 安裝液體滅火到項目中。

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組件或其他東西。