流星的未渲染钩子

meteor js unrendered hook?

本文关键字：流星      更新时间：2023-09-26

当我添加模板时，我喜欢使用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);
}

问题是：有没有一种方法可以为模板提供"退出动画"，也许可以使用类似于"未渲染"挂钩的东西？如果没有，一个可以即兴制作并包装在一个包裹里吗？

提前谢谢。

0.8.2版本添加了特殊的_uihooks功能

添加用于注册钩子的初步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（））。

在当前的todos应用中也有一个例子

对于您给定的示例，（它可能不适用于子模板，但您可以尝试）：

模板：

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

我想有一个"Template.preDestroyed"钩子会很好，但在出现类似的情况之前，自己处理应该不会太棘手。

你可以做一些类似的事情：

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

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

如果您解释一下是什么情况导致模板未被渲染（以及这意味着隐藏还是从DOM中删除），也许会有所帮助。

从1.0.4开始更新，我们现在有：

  • .onRendered
  • .on已创建
  • .on已销毁

旧方法已被弃用。

相关文章：