Question

我正在开始一个Meteor项目，我想在不同的页面上使用不同的body css类。如果我向身体添加一个css类，我得到：

Attributes on <body> not supported

我发现的唯一方法是使用JS添加类。有更好的方法吗？

Answer 1

标准做法是在各自的路径挂钩中设置主体类：

Router.map(function() {

  this.route('someRoute', {
    path: '/someAddress',

    onBeforeAction: function() {
      $('body').addClass('someRouteBodyClass');
      this.next();
    },

    onStop: function() {
      $('body').removeClass('someRouteBodyClass');
    },

    ...
  };

});

Answer 2

使用路由器的公认解决方案很棒。还有一个为整个app设置body类的解决方案：

Meteor.startup(function() {
   $('body').addClass('classes-for-body');
});

Answer 3

您还可以在模板中执行操作＆＃34;呈现＆＃34;并且＆＃34;销毁＆＃34;回调。

Template.myTemplate.rendered = function(){
    $('body').addClass('my-class');
}

Template.myTemplate.destroyed = function(){
    $('body.my-class').removeClass('my-class');
}

Answer 4

使用FlowRouter可以使用：

FlowRouter.group({
  prefix: '/admin',
  triggersEnter: [function() {
    $('body').addClass('admin-layout');
  }],
  triggersExit: [function() {
    $('body').removeClass('admin-layout');
  }],
});

Answer 5

您可以随时在每个html页面中执行该样式。不是最好的做法。但是，它的工作原理。：d

Answer 6

根据您所在的路线添加课程的另一种方法：

var currentCategory = new ReactiveVar();
Router.onAfterAction(function() {
    var categoryName = Router.current().options.route._path.split('/')[1];
    currentCategory.set(categoryName);
});
Template.mainLayout.helpers({
    currentCategory: function() {
        return currentCategory.get();
    }
});

-

<template name="mainLayout">
  <body class='{{currentCategory}}'>
</body>

Answer 7

这是我用来将body类添加到主页的。

Router.route('/', {
name: 'landing',
onAfterAction: function() {
    setTitle();
},
onBeforeAction: function(){
    $('body').addClass('home');
    this.next();
},
onStop: function() {
  $('body').removeClass('home');
}});

如何将CSS类添加到Meteor中的body元素？

7 个答案: