如何将 class 添加到 Iron 路由器默认模板？

Question

我一直在寻找，并没有真正找到这个看似非常简单的问题的答案。

我有一个带有默认模板的应用程序

Router.configure({
layoutTemplate: 'appLayout',
});

<template name="appLayout">
  <div id="container">
    {{> yield}}
  </div>
</template>

然后我有一条新路线叫做'reservations'

Router.route('/reservations',{
name:'reservations',
  onAfterAction: function(){

  }
});

我想要做的是添加一个 class 到使用 css 过渡动画背景颜色从白色到黑色的默认容器。

到目前为止我试过的是onAfterAction

Router.route('/reservations',{
name:'reservations',
onAfterAction: function(){
    $('#container').addClass('black');
}
});

什么都不做，没有错误，什么也没有。所以我试过了

Template.reservations.rendered = function () {
setTimeout(function(){
    $('#container').addClass('black');
});
};

这有效，但会闪烁并造成路由问题。您可以在 crawfish.meteor.com 看到路由问题。如何在模板呈现后简单地切换 class？

Answer 1

您可以使用 rendered 事件：

Template.reservations.rendered = function() {
    if( ! this.rendered) {
        $('#container').addClass('black');
        this.rendered = true;
    }
};

请注意，我们检查并设置渲染。 Template 实例然后有一个 'rendered' 变量，我们用它来防止在重新渲染时重新触发（可以运行多次）

如何将 class 添加到 Iron 路由器默认模板？

How can I add a class to iron router default template?

node.js

meteor

iron-router