Ember Collapsible Container

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. 이 프로젝트에 액체 화재를 설치합니다. 속성 spoilerIsVisible과 toggleSpoiler 재산 생성, 컨트롤러/구성 요소에서

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

2. :

3. 이 같은 전환을 정의 작성,

   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 단계를 래핑 할 수 있습니다.