javascript - 使用 Meteor 为特定页面/路由指定 'html, body' css 设置

Question

我正在尝试为我的 Meteor 应用程序中的特定路由/页面调整一些页面背景 css 设置。我能够通过使用 Template.template.rendered/destroyed 和 jQuery 选择器在模板呈现后注入(inject) css 来做到这一点，如下所示:

Template.template.rendered = function() {
  $('html, body').css({
    "background-color": "#fdfdfd",
    ...additional css properties
  };
};

Template.template.destroyed = function() {
  $('html, body').css({
    "background": "none"
  };
};

我想知道是否有人知道更好的方法来做到这一点。似乎有点慢，使用浏览器上的后退按钮返回页面时，页面似乎卡住了大约 5 秒钟。在 Hook 之前/之后使用 iron-router 是否更好？我对它们不太熟悉，但速度慢似乎是浏览器的问题。我的想法是前/后 Hook 将有助于解决这个问题。除了这两种方法还有其他选择吗？谢谢。

Answer 1

除非您真的，真的需要以特定于特定页面的方式将样式直接附加到 html 和 body 元素，我强烈建议将整个页面包装在一个具有 width: 100vw; 和 height: 100vh; 以及适当的 id 的 div 中，并且然后使用后者直接使用 css 设置样式。

如果您确实需要直接附加到 html 和 body 元素，您是否尝试过使用 onAfterAction 来做到这一点 在铁路由器中 Hook ？考虑到样式取决于路线而不是模板，这似乎是一个更好的地方(尽管 Blaze 意味着您可能可以摆脱您正在做的事情)。