Css changes not retained from route to route


#1

I made changes on page by click event by adding/removing classes to some elements. But when new page is loaded because of URL changes then all those css classes are reset to default as if everything has been rendered again. I am using flow router. Can anyone help, how to save css changes made by click event on one page retained thru route to route. thanks


#2

A bit hacky, but perhaps something like:

<template name="myTemplate>
  <div class="{{myClasses}}"></div>
</template>

Template.myTemplate.onCreated(function () {
  Session.set('myClasses', '');
});

Templates.myTemplate.helpers({
  myClasses: function () {
    return Session.get('myClasses');
  }
});

Template.myTemplate.events({
  'click div': function (e, t) {
    Session.set('myClasses', 'blueClass');
  }
});

<style>
  .blueClass {
    background-color: blue;
  }
</style>


#3

Thanks Sean for suggestion. I was also thinking along these lines but downside is that I have to get session and set class for every route I have. Is there way I can write Templates.*.helpers ? Or do I have to write it manually for all routes?


#4

Check out https://themeteorchef.com/snippets/using-global-template-helpers/


#5

Sweet, appreciate it. Thanks