2014-11-09 2 views
0

템플릿을 추가 할 때 Meteor의 렌더링 된 후크를 입구 애니메이션에 사용하고 싶습니다. 내 템플릿meteor js unrendered hook?

: 내 자바 스크립트 파일에

<template name="main"> 
    {{#each people}} 
     {{>person}} 
    {{/each}} 
</template> 

<template name="person"> 
    <li> {{name}} </li> 
</template> 

예를 들면 다음과 같습니다이다

//in js file 
Template.person.rendered = function() { 
    $(this.firstNode).hide().fadeIn(1500); 
} 

live example here

질문 :에 "종료 애니메이션"을 제공 할 수있는 방법이 아마도 "unrendered"후크 같은 것을 사용하여 템플릿을 위해? 그렇지 않다면 즉석에서 포장해서 포장 할 수 있습니까?

미리 감사드립니다.

답변

3

Version 0.8.2 Added a special _uihooks feature

는 블레이즈가 삽입, 이동을 계획 할 때 실행하거나 DOM 요소를 제거하기 위해 후크를 등록하기위한 예비 API를 추가합니다. 예를 들어 이러한 후크를 사용하여 노드를 삽입, 이동 또는 제거 할 때 노드에 애니메이션을 적용 할 수 있습니다. 을 사용하려면 컨테이너 DOM 요소에 _uihooks 속성을 설정할 수 있습니다.

insertElement : _uihooks는 다음과 같은 세 가지 속성의 집합이 할 수있는 객체 인 기능 (노드, 다음) : 기능 : 블레이즈는 다음 요소

moveElement 전에 DOM 요소 노드를 삽입하고자 할 때 호출 (노드, 다음) : 기능 (노드) : 블레이즈가 설정 한 경우 그 DOM의 요소 노드를

주를 제거하고자 할 때 호출이라고는 블레이즈

removeElement 옆에있는 요소 전에 DOM 요소 노드를 이동하고자 할 때 컨테이너 요소에있는 이러한 함수 중 하나 인 Blaze가 실제 작업을 수행하지 않습니다. 실제로 노드를 삽입, 이동 또는 제거하는 것은 사용자의 책임입니다 (예 : $ (노드) .remove()).당신의 주어진 예를 들어 There's also an example of this in the current todos app

은 (는 하위 템플릿으로 작동하지 않을 수 있습니다,하지만 당신은 시도 할 수 있습니다) :

템플릿 :

<template name="main"> 
    <ul> 
    {{#each people}} 
     <li>{{name}}</li> 
    {{/each}} 
</ul> 
</template> 

자바 스크립트 :

Template.main.rendered = function(){ 

    this.find('ul')._uihooks = { 
    insertElement: function(node, next) { 
     $(node) 
     .hide() 
     .insertBefore(next) 
     .fadeIn(); 
    }, 
    removeElement: function(node) { 
     $(node).fadeOut(function() { 
     this.remove(); 
     }); 
    } 
    }; 
} 
+0

이것이 바로 제가 생각한 것입니다. 진짜 빨리 시험해 보러 간다. –

+0

이것은 나를위한 충분한 해결책입니다! 고마워, 이건 정말 고품질의 대답이라고 생각해. –

1

"Template.preDestroyed"후크가있는 것이 좋겠지 만 그와 같은 것이 나올 때까지 직접 처리하는 것이 너무 까다로워서는 안됩니다. 템플릿 인스턴스가 떠나고 싶을 때

$(*template instance selector*).fadeOut(1500, function(){ $(this).remove(); }) 

:

당신이 뭔가를 할 수 있습니다.

템플릿이 렌더링되지 않은 상태 (DOM에서 숨겨 지거나 제거되었다는 의미)로 인도하는 상황을 설명하면 도움이 될 것입니다.

+0

"{{#if}}"에 포함 된 템플릿이 더 이상 만족스럽지 않거나 {{{#if}}에서 사라지는 경우와 같이 도우미 블록의 템플릿 인스턴스가 종료 애니메이션을 처리한다고 가정합니다 #each}} 블록. 어쩌면 당신은'people'의 목록을 가지고있을 것이고, 목록에서 하나를 삭제하면, 템플릿 인스턴스의 사후 릴리스가 트리거됩니다. 'rendered' 훅과 비슷한 문법을 ​​사용하여 사라지면 정말 멋질 것입니다. –

0

업데이트 1.0.4의로 우리는 지금이 :

오래된 방법이 사용되지 않습니다을 .onDestroyed .onCreated .onRendered.