Почему логика Iron-Router onBeforeAction не влияет на DOM?

Я решил реализовать небольшую анимацию между страницами для 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>

Я не понимаю, как правильно использовать эти действия?


javascript jquery meteor iron-router spacebars
person ilrein    schedule 12.02.2015    source источник
comment
Переместите это в свой Template.priority.rendered. onBeforeAction выполняется до загрузки DOM, и даже onAfterAction может быть раньше, в зависимости от того, как вы используете свои шаблоны. Обычно onBeforeAction используется для подготовки данных для передачи хелперам (я размещаю там свои подписки). Я бы не стал добавлять в маршрут манипуляции с DOM.   -  person below9k    schedule 12.02.2015
comment
Имеет смысл. Спасибо!   -  person ilrein    schedule 12.02.2015

Ответы (1)


arrow_upward
1
arrow_downward

Хуки вызываются немедленно, до того, как DOM будут готовы.

Вместо этого вам нужно сделать это в функции рендеринга шаблона:

Template.priority.rendered = function() {
    $('.show-title').css('display', 'none');
    $('.show-title').velocity('transition.fadeIn', 1000);
}
person tarmes    schedule 12.02.2015
comment
Если я использую эту технику, как я могу сделать так, чтобы моя предыдущая страница также имела анимацию? Если я использую Template.priorities.destroyed (мое предыдущее представление), оно не будет запускать анимацию, потому что это обратные вызовы после удаления представления. - person ilrein; 12.02.2015