流星 js 铁路由器:每当路由更改时应用 CSS 更改 [英] meteor js iron router: apply CSS change whenever route changes
问题描述
我的应用中有主页、联系页面和其他几个与产品相关的页面.
目标是仅将背景图像应用于特定路线:/homepage 和 /contact.如果用户导航离开任一路线，请应用一些 css 更改.
我现在正在我主页上的一个助手一起破解这个，就像这样:
Template.homepage.rendered = function () {var route = Router.current();如果(路线.路径=='/'){document.body.className = "showBackgroundImage";}};这里部分获胜，因为这将激活 css，但我需要在路线更改时停用.我还在 router.js 中尝试了以下内容:
this.route('主页', {小路: '/'，onAfterAction:函数(参数){//给body添加一个类名document.body.className = "showBackgroundImage";}});和后台标准中的CSS:
.showBackgroundImage {背景:url(bgImage.jpg) 无重复中心固定；}这可以使用 iron:router 布局轻松完成，并通过路由将不同的类应用到每个页面.
首先你需要定义一个主布局，例如:
<!-- 可选的导航栏产量-->{{>yield region="navbar"}}<div class="{{currentRouteName}}-page">{{>屈服}}<!-- 可选的页脚产量-->{{>yield region="footer"}}
currentRouteName 助手应该类似于:
UI.registerHelper("currentRouteName",function(){返回 Router.current()?Router.current().route.getName():"";});然后我建议将 RouteController 与您的主布局相关联，作为所有 RouteController 的基类.
MainController=RouteController.extend({layoutTemplate:"mainLayout",//分别为导航栏和页脚区域生成导航栏和页脚模板产量模板:{导航栏":{到:导航栏"},页脚":{到:页脚"}}});接下来，您需要确保您的路由使用派生自 MainController 的控制器.
HomeController=MainController.extend({模板:家"});路由器映射(函数(){this.route("家",{小路:"/"，//可选，默认情况下，iron:router 足够聪明，可以猜测控制器名称，//通过骆驼套路名称并附加控制器"控制器:家庭控制器"});});所以现在你的主页路由页面被一个具有主页"类的 div 包围，所以你可以用普通的 CSS 来设置它的样式(或者更好的是，使用 LESS):
.home-page{/* 你的 css 在这里 */}如果您定义其他路由，这将无缝工作，只需从 MainController 继承，您就会自动拥有一个带有路由名称页面类的页面.
当然，你可以为多个页面使用相同的样式，只需在CSS中指定即可:
.home-page, .contact-page{/* 你的 css 在这里 */}你可以用布局做非常好的事情，我强烈鼓励使用它们.
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;
}
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 RouteControllers.
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.
这篇关于流星 js 铁路由器:每当路由更改时应用 CSS 更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
