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

Question

我决定在 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>

我是不是不明白如何正确使用这些动作？

Answer 1

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

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

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

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

Why Does Iron-Router onBeforeAction Logic Not Affect the DOM?

javascript

jquery

meteor

iron-router

spacebars