Router meteor js iron: apply CSS change when changing route

Question

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

The goal is to apply the background image to ONLY specific routes: /homepage and /contact . If the user goes from any route, apply some css change.

Now I hack this with an assistant on my home page, for example:

 Template.homepage.rendered = function () { var route = Router.current(); if ( route.path == '/' ) { document.body.className = "showBackgroundImage"; } }; 

Partial win here since it activates css, but I need to deactivate when changing the route. I also tried the following in 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 easy to do with iron:router layouts and applying different classes to each page using routing.

First you need to define the main layout, for example:

 <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 this:

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

Then I recommend linking the RouteController to your main layout, which will serve as the base class for all 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" } } }); 

Then you need to make sure that your routes use the controller that is obtained 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 route homepage is surrounded by a div that has a homepage class, so you can style it in plain CSS (or, even better, using LESS):

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

If you define other routes, this will work MainController , just inherit from MainController , and you will have a page with the class of the route name 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 things with layouts, I highly recommend using them.

Answer 2

I did this exact thing using iron-router and jQuery . Here is 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 is what helped me a lot:

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

What is it!

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

How easy and convenient!

If you want to assign a specific name instead of a template name, simply replace this.route.options.template with this.route.getName() and specify a name for your route.