流星js没有渲染的钩子？(meteor js unrendered hook?)

流星js没有渲染的钩子？(meteor js unrendered hook?)

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

这里的实例

问题是：有没有办法为模板提供“退出动画”，可能使用类似“未渲染”的钩子？ 如果没有，是否可以将其临时包装并包装？

提前致谢。

I like to use Meteor's rendered hook for entrance animations when I'm adding templates. Here's an example:

in my templates:

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

in my javascript file:

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

live example here

The question: is there a way to provide an "exit animation" for templates, perhaps using something like an "unrendered" hook? If not, could one be improvised and wrapped in a package?

Thanks in advance.

最满意答案

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

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

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

moveElement：function（node，next）：当Blaze打算在元素next之前移动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(); }); } }; }

Version 0.8.2 Added a special _uihooks feature

Add preliminary API for registering hooks to run when Blaze intends to insert, move, or remove DOM elements. For example, you can use these hooks to animate nodes as they are inserted, moved, or removed. To use them, you can set the _uihooks property on a container DOM element. _uihooks is an object that can have any subset of the following three properties:

insertElement: function (node, next): called when Blaze intends to insert the DOM element node before the element next

moveElement: function (node, next): called when Blaze intends to move the DOM element node before the element next

removeElement: function (node): called when Blaze intends to remove the DOM element node

Note that when you set one of these functions on a container element, Blaze will not do the actual operation; it's your responsibility to actually insert, move, or remove the node (by calling $(node).remove(), for example).

There's also an example of this in the current todos app

For your given example, (it might not work with the sub template, but you can try):

Template:

<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(); }); } }; }流星js没有渲染的钩子？(meteor js unrendered hook?)

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

这里的实例

问题是：有没有办法为模板提供“退出动画”，可能使用类似“未渲染”的钩子？ 如果没有，是否可以将其临时包装并包装？

提前致谢。

I like to use Meteor's rendered hook for entrance animations when I'm adding templates. Here's an example:

in my templates:

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

in my javascript file:

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

live example here

The question: is there a way to provide an "exit animation" for templates, perhaps using something like an "unrendered" hook? If not, could one be improvised and wrapped in a package?

Thanks in advance.

最满意答案

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

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

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

moveElement：function（node，next）：当Blaze打算在元素next之前移动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(); }); } }; }

Version 0.8.2 Added a special _uihooks feature

Add preliminary API for registering hooks to run when Blaze intends to insert, move, or remove DOM elements. For example, you can use these hooks to animate nodes as they are inserted, moved, or removed. To use them, you can set the _uihooks property on a container DOM element. _uihooks is an object that can have any subset of the following three properties:

insertElement: function (node, next): called when Blaze intends to insert the DOM element node before the element next

moveElement: function (node, next): called when Blaze intends to move the DOM element node before the element next

removeElement: function (node): called when Blaze intends to remove the DOM element node

Note that when you set one of these functions on a container element, Blaze will not do the actual operation; it's your responsibility to actually insert, move, or remove the node (by calling $(node).remove(), for example).

There's also an example of this in the current todos app

For your given example, (it might not work with the sub template, but you can try):

Template:

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