流星js铁路由器：每当路由更改时应用CSS更改答案

【问题标题】：meteor js iron router: apply CSS change whenever route changes流星js铁路由器：每当路由更改时应用CSS更改
【发布时间】：2014-10-16 20:31:42
【问题描述】：

我的应用中有主页、联系页面和其他几个与产品相关的页面。

目标是仅将背景图像应用于特定路线：/homepage 和 /contact。如果用户导航离开任一路线，请应用一些 css 更改。

我现在正在我的主页上与一个助手一起破解这个，就像这样：

Template.homepage.rendered = function () {

    var route = Router.current();

    if ( route.path == '/' ) {

        document.body.className = "showBackgroundImage";

    }
};

在这里部分获胜，因为这将激活 css，但是当路由更改时我需要停用。我还在我的router.js 中尝试了以下操作：

this.route('homepage', {
    path: '/', 
    onAfterAction: function  (argument) {
       // add a class name to body
       document.body.className = "showBackgroundImage";
    }
  });

以及后台标准中的CSS：

.showBackgroundImage { 
  background: url(bgImage.jpg) no-repeat center center fixed; 
}

【问题讨论】：

标签： javascript css meteor iron-router meteor-blaze

【解决方案1】：

这很容易通过使用iron:router 布局并通过路由将不同的类应用于每个页面来完成。

首先你需要定义一个主布局，例如：

<template name="mainLayout">
  <!-- optional navbar yield -->
  {{> yield region="navbar"}}
  <div class="{{currentRouteName}}-page">
    {{> yield}}
  </div>
  <!-- optional footer yield -->
  {{> yield region="footer"}}
</template>

currentRouteName 助手应该类似于：

UI.registerHelper("currentRouteName",function(){
  return Router.current()?Router.current().route.getName():"";
});

然后我建议将 RouteController 关联到您的主布局，它将作为您所有 RouteControllers 的基类。

MainController=RouteController.extend({
  layoutTemplate:"mainLayout",
  // yield navbar and footer templates to navbar and footer regions respectively
  yieldTemplates:{
    "navbar":{
      to:"navbar"
    },
    "footer":{
      to:"footer"
    }
  }
});

接下来，您需要确保您的路由使用派生自 MainController 的控制器。

HomeController=MainController.extend({
  template:"home"
});

Router.map(function(){
  this.route("home",{
    path:"/",
    // optional, by default iron:router is smart enough to guess the controller name,
    // by camel-casing the route name and appending "Controller"
    controller:"HomeController"
  });
});

所以现在你的主页路由页面被一个具有“主页”类的 div 包围，所以你可以用纯 CSS（或者更好的是，使用 LESS）来设置它的样式：

.home-page{
  /* your css goes here */
}

如果您定义其他路由，这将无缝运行，只需从 MainController 继承，您将自动拥有一个带有 route-name-page 类的页面。

当然，你可以为多个页面使用相同的样式，只需在 CSS 中指定即可：

.home-page, .contact-page{
  /* your css goes here */
}

你可以用布局做一些非常好的事情，我强烈鼓励使用它们。

【讨论】：

添加到这个方法：有时你需要改变 body 类以使某个布局工作。为此，请使用所述布局的 rendered 和 destroyed 回调，即：Template.layout.rendered = function() {$('body').addClass('layoutBody')}; 然后 Template.layout.destroyed = function() {$('body').removeClass('layoutBody')};
从 Iron Router 1.0 开始（可能更早），使用 Router.current().route.getName() 获取当前路由名称（注意从 route.name 到 route.getName() 的更改）。
感谢您注意到已弃用的代码，我更新了我的答案。为了进一步解释这一点，routes 现在是 functions 而不是普通的 objects，在 JS 中，name 是 functions 的默认属性，包含 function 名称，因此需要新的 @ 987654346@getter。

【解决方案2】：

我已经使用iron-router 和jQuery 完成了这件事。这就是我所做的。

/**
 * Add a background image for certain routes.
 */
var setBackground = function () {
  var route = this.route.name;
  var routes = ['homepage', 'contact'];

  if (_.contains(routes, route)) {
    $('body').addClass('showBackgroundImage');
  } else {
    $('body').removeClass('showBackgroundImage');
  }
};

Router.onBeforeAction(setBackground);

【讨论】：

【解决方案3】：

使用 Meteor 1.2 和 iron-router，这对我来说非常简单：

Router.onBeforeAction(function() {
  $('body').addClass(this.route.options.template);
  this.next();
});

就是这样！

这将从您正在使用的模板中获取名称并将其分配给正文。

多么简单方便啊！！

如果您想指定特定名称而不是模板名称，只需将 this.route.options.template 替换为 this.route.getName() 并为您的路线命名。

【讨论】：