Question

我的应用中有主页，联系页面和其他几个与产品相关的页面。

目标是将背景图像应用于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; 
}

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

所以现在你的家庭路线页面被一个有一个＆＃34;主页＆＃34; class，所以你可以在纯CSS中设置样式（或者更好，使用LESS）：

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

如果你定义了其他路由，这将无缝地工作，只需继承MainController，你就会自动拥有一个带有route-name-page类的页面。

当然，您可以对多个页面使用相同的样式，只需在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()，并为您的路线命名。

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

3 个答案: