为什么 Iron-Router onBeforeAction 逻辑不影响 DOM？答案

【问题标题】：Why Does Iron-Router onBeforeAction Logic Not Affect the DOM?为什么 Iron-Router onBeforeAction 逻辑不影响 DOM？
【发布时间】：2015-04-13 08:57:27
【问题描述】：

我决定在 Meteor 的页面之间实现一个快速的小动画。我决定这样做的方法是使用 onBeforeAction 挂钩，将 DOM 元素设置为 display:none，然后使用 onAfterAction 对其进行动画处理。

问题是，元素永远不会从屏幕上消失。我不确定我做错了什么。这是我的路线：

Router.route('/priority/:_id', {
  path: '/priority/:_id',
  template: 'priority',
  data: function(){
    return Priorities.findOne({_id: this.params._id})
  },
  onBeforeAction: function() {
    $('.show-title').css('display', 'none'); 
    this.next();
  }
  // ,
  // onAfterAction: function() {
  //   $('.show-title').velocity('transition.fadeIn', 1000);
  // }
})

作为参考，这里是模板：

<template name="priority">
  <h1 class="show-title">Priority: {{title}}</h1>
</template>

我不了解如何正确使用这些操作吗？

【问题讨论】：

将其移至您的Template.priority.rendered。 onBeforeAction 是在加载 DOM 之前，甚至 onAfterAction 也可以在之前，这取决于您使用模板的方式。通常，onBeforeAction 将用于准备要传递给助手的数据（我把订阅放在那里）。我不会将 DOM 操作放入路由中。
有道理。谢谢！

标签： javascript jquery meteor iron-router spacebars

【解决方案1】：

在 DOM 准备好之前立即调用钩子。

您需要在模板的渲染函数中执行此操作：

Template.priority.rendered = function() {
    $('.show-title').css('display', 'none');
    $('.show-title').velocity('transition.fadeIn', 1000);
}

【讨论】：

如果我使用这种技术，我怎样才能让我的上一页也有动画？如果我使用 Template.priorities.destroyed（我以前的视图），它不会运行动画，因为这些是视图被删除后的回调。