meteor js iron路由器：当路由更改时应用CSS更改 [英] meteor js iron router: apply CSS change whenever route changes

问题描述

我的应用程式中有首页，联络人网页和其他几个产品相关网页。

I have homepage, contact page, and several other product related pages in my app.

目标是将背景图片套用至特定路线： / homepage 和 / contact 。如果用户离开任一条路线，请应用一些css更改。

The goal is to apply a background image to ONLY specifc routes: /homepage and /contact. If user navigates away from either route, apply some css change.

我现在在我的主页上使用助手一起进行攻击，例如：

I am hacking this together now with a helper on my homepage, like so:

Template.homepage.rendered = function () {

    var route = Router.current();

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

        document.body.className = "showBackgroundImage";

    }
};

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

Partial win here, since this will activate the css, but I need to deactivate when route changes. I have also tried the following within my router.js:

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

和CSS在后台标准中：

And CSS in the background standard:

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

推荐答案

code> iron：router 布局，并通过路由对每个页面应用不同的类。

This is easily done using iron:router layouts and applying a different class to each pages via routing.

首先需要定义一个main-布局如：

First you need to define a main-layout such as :

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

currentRouteName 助手应该看起来像：

The currentRouteName helper should look something like :

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

然后，我建议将 RouteController main-layout将作为所有 RouteController 的基类。

Then I recommend associating a RouteController to your main-layout that will serve as the base class for all of your 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 。

Next you need to make sure that your routes use a controller which is derived from 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"
  });
});

现在你的home路由页面被一个home-page你可以在纯CSS（或更好，使用LESS）中设置样式：

So now your home route page is surrounded by a div having an "home-page" class, so you can style it in plain CSS (or better yet, using LESS) :

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

如果你定义其他路由，无缝地，只是继承自 MainController ，您将自动拥有一个包含route-name-page类的页面。

If you define other routes, this will work seamlessly, just inherit from MainController and you'll have a page with route-name-page class automatically.

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

Of course, you can use the same style for multiple pages, just specify it in CSS :

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

可以做非常好的东西与布局，我强烈鼓励使用他们。

You can do really nice stuff with layouts, I highly encourage using them.

这篇关于meteor js iron路由器：当路由更改时应用CSS更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！