meteor js iron router：路由更改时应用CSS更改

Question

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

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";

    }
};

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";
    }
  });

And CSS in the background standard:

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

Answer 1

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

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>

The currentRouteName helper should look something like :

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

Then I recommend associating a RouteController to your main-layout that will serve as the base class for all of your RouteController s.

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

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"
  });
});

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 */
}

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.

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.

Answer 2

I've done this exact thing using iron-router and jQuery . Here's what I did.

/**
 * 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);

Answer 3

Using Meteor 1.2 and iron-router , here's what worked really easy for me:

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

That's it!

This will take the name from the template your are using and assign it to the body.

How easy and convenient!!

If you want to assign a specific name instead of the template name, just replace this.route.options.template with this.route.getName() and give a name to your route.