CODEWITHSUNDEEP
meteoriron-router
Daniel Fischer
Daniel Fischer

Reputation: 3062

Set a reactive layout in Meteor with Iron Router

Is there a way to set a reactive layout in meteor with iron router?

For example:

Router.configure({
  loadingTemplate: 'loading',
  layoutTemplate: Session.get('fullscreen') ? 'layoutFull' : 'layout'
});

Then a link in both layouts with:

<a href="" data-action="toggleFullscreen" class="b-button">Toggle Fullscreen</a>

And then in both layouts something like this:

  Template.layoutFull.events({
    'click [data-action=toggleFullscreen]': function() {
      Session.set('fullscreen', !Session.get('fullscreen'));
    }
  });

  Template.layout.events({
    'click [data-action=toggleFullscreen]': function() {
      Session.set('fullscreen', !Session.get('fullscreen'));
    }
  });

The issue I'm running into is Router.configure isn't setting layoutTemplate reactively. Is there a way to do this so it affects all routes?

Upvotes: 1

Views: 84

Answers (1)

sdooo
sdooo

Reputation: 1881

It has to be a function to be reactive:

layoutTemplate: function(){
   return Session.get('fullscreen') ? 'layoutFull' : 'layout'
}

Also, why two functions? You need just one since this is the negation of clicked Session

Upvotes: 1

Related Questions