Question

当我添加模板时，我喜欢使用Meteor的渲染钩子来进入动画。这是一个例子：

在我的模板中：

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

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

在我的javascript文件中：

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

live example here

问题：是否有办法为模板提供“退出动画”，可能使用类似“未渲染”的钩子？如果没有，是否可以即兴创作一个包装？

提前致谢。

Answer 1

Version 0.8.2 Added a special _uihooks feature

添加初步API，用于注册Blaze打算运行的挂钩   插入，移动或删除DOM元素。例如，您可以使用这些   在插入，移动或移除节点时挂钩动画节点。使用   它们，您可以在容器DOM元素上设置_uihooks属性。   _uihooks是一个对象，可以包含以下三个属性的任何子集：

insertElement：function（node，next）：当Blaze打算在元素下一个之前插入DOM元素节点时调用

moveElement：function（node，next）：Blaze打算在下一个元素之前移动DOM元素节点时调用

removeElement：function（node）：当Blaze打算删除DOM元素节点时调用

请注意，在容器元素上设置其中一个函数时，   Blaze不会做实际操作;这是你的责任   实际插入，移动或删除节点（通过调用   $（node）.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>

使用Javascript：

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();
      });
    }
  };
}

Answer 2

我想拥有一个“Template.preDestroyed”钩子会很好，但是在这样的事情出现之前，自己处理它不应该太棘手。

您可以执行以下操作：

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

当您希望模板实例离开时。

如果您解释导致模板被取消渲染的情况（以及这是否意味着隐藏或从DOM中删除），也许会有所帮助。

Answer 3

我们现在拥有的1.0.4更新：

.onRendered
.onCreated
.onDestroyed

旧方法已被弃用。

流星js没有渲染的钩子？

3 个答案: