meteor js iron router: примените изменение CSS при изменении маршрута

Question

У меня есть домашняя страница, страница контакта и несколько других связанных с продуктом страниц в моем приложении.

Цель состоит в том, чтобы применить фоновое изображение к ТОЛЬКО определенным маршрутам: /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; 
} 

Answer 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 к главному-макету, что будет служить базовым классом для всех ваших RouteController.

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 (или еще лучше, используя меньше):

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

Если вы определяете другие маршруты, это будет работать без сбоев, просто наследуйте от MainController, и у вас будет страница с классом имени маршрута автоматически.

Конечно, вы можете использовать один и тот же стиль для нескольких страниц, просто указать его в CSS:

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

Вы можете сделать действительно хороший материал с раскладками, я настоятельно рекомендую использовать их.

Answer 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); 

Answer 3

Использование Meteor 1.2 и железо-маршрутизатор, вот что получилось, очень легко для меня:

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

Вот оно!

Это займет имя из шаблона, который вы используете, и назначьте его телу.

Как легко и удобно!

Если вы хотите назначить определенное имя вместо имени шаблона, просто замените this.route.options.template с this.route.getName() и дать название маршрута.