目标是将背景图像应用于ONLY特定路线：/ 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;
}
最佳答案
这很容易使用iron：路由器布局并通过路由为每个页面应用不同的类.
首先,您需要定义主布局,例如：
currentRouteName助手应该类似于：
UI.registerHelper("currentRouteName",function(){
return Router.current()?Router.current().route.getName():"";
});
然后我建议将RouteController与主布局相关联,该主布局将作为所有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派生的控制器.
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设置它(或者更好,使用LESS)：
.home-page{
/* your css goes here */
}
如果你定义了其他路由,这将无缝地工作,只需从MainController继承,你就会自动拥有一个带有route-name-page类的页面.
当然,您可以为多个页面使用相同的样式,只需在CSS中指定它：
.home-page,.contact-page{
/* your css goes here */
}
你可以用布局做很好的事情,我非常鼓励使用它们.
