Изменить класс тела на основе URL-адреса в Meteor

В моем приложении есть шаблон с именем layout. Внутри есть:

<body id="body class="{{blue}}>

В основном, чего я хочу добиться, так это того, что когда вы нажимаете URL-адрес, например, www.abc.com/sky, я хочу добавить класс body синего цвета:

<body id="body class="blue">

В папке client у меня есть это, но, похоже, не работает:

Template.layout.helpers({
  blue: function() {
    var loc = window.location.href; // returns the full URL
    if(/sky/.test(loc)) {
    $('#body').addClass('blue');
    }
  }
});

Я новичок в мире javascript и следую учебному пособию, но оно не предназначено для Meteor.


jquery meteor meteor-helper
person Sylar    schedule 01.05.2015    source источник
comment
Вы используете железный роутер?   -  person David Weldon    schedule 01.05.2015
comment
Привет @DavidWeldon, да, я.   -  person Sylar    schedule 01.05.2015

Ответы (2)


arrow_upward
5
arrow_downward

Вы должны изменить элементы DOM в onRendered следующим образом:

Template.layout.onRendered(function() {
  // get the current route name (better than checking window.location)
  var routeName = Router.current().route.getName();

  // add the class to body if this is the correct route
  if (routeName === 'myRoute')
    $('body').addClass('blue');
});

Template.layout.onDestroyed(function() {
  // remove the class to it does not appear on other routes
  $('body').removeClass('blue');
});

Альтернативное (и, возможно, более простое) решение — просто использовать помощник в вашем шаблоне body:

Template.body.helpers({
  klass: function() {
    if (Router.current().route.getName() === 'myRoute') {
      return 'blue';
    }
  }
});

Тогда ваш body может выглядеть так:

<body class="{{klass}}"></body>
person David Weldon    schedule 01.05.2015
comment
Работает отлично. Последний вариант был лучшим, так как верхушка не любит быть реактивной. - person Sylar; 02.05.2015
comment
Кажется, что {{klass}} в моем html работает только тогда, когда он находится внутри тега body.... - person phocks; 20.10.2015
comment
Router.current().route.path() работал на меня. (Router.current().route.getName() нет) - person Pedro Reis; 14.10.2016

arrow_upward
0
arrow_downward

Мне тоже нужна была эта функция, и я обнаружил ту же проблему, что и @phocks, в том, что {{klass}} работает только внутри, а не в теге body. Я новичок в Meteor, но вот мой подход, который просто использует jQuery:

Template.body.onRendered(function(){
    var instance = this;
    instance.autorun(function() {
        FlowRouter.watchPathChange();
        var context = FlowRouter.current();
        // this does the trick, below
        $('body').attr('class', '').addClass(context.route.name);   

        // this is just to do more CSS stuff if they're logged in
        if(Meteor.userId()){
            $('body').addClass('logged-in');   
        } else {
            $('body').removeClass('logged-in');   
        }
    });
});

Я использую это в файле body.js, и этот код зависит от FlowRouter. При изменении пути я получаю name, который я объявил для маршрута, удаляю все предыдущие имена маршрутов из тега body, а затем добавляю имя текущего маршрута.

В качестве небольшого примечания я также добавляю класс logged-in в тело для аутентифицированных пользователей, так что это то, что делают нижние несколько строк.

person MikeTT    schedule 18.01.2016