CODEWITHSUNDEEP
javascriptmeteor
user3142695
user3142695

Reputation: 17322

Meteor: Add a class in case of defined route

I got the following template. Now I want to add a class to only in case of a defined route:

<template name="_layout">
  <header>
  {{#if state}}
    {{> _navbar}}
  {{/if}}
  </header>
  <main>
    {{>yield}}
  </main>
  <footer>
    <p>&copy; 2015</p>
  </footer>

</template>

route.es6.js:

Router.configure({layoutTemplate: '_layout', controller: 'Controller'})

Router.route('/', function () {
  Router.go('search')
})
Router.route('/search')
Router.route('/conditions/:_id?', {
  name: 'conditions'
})

So for www.website.com/search the class "newClass" should be added to the main-element. For www.website.com/conditions/12345 there won't be a class for the main-element at all.

Upvotes: 0

Views: 29

Answers (2)

soren468
soren468

Reputation: 319

I would pass it in as a data attribute.

Router.configure({layoutTemplate: '_layout', controller: 'Controller'})

Router.route('/search', function() {
  this.layout('_layout', {
    data: function() {
      return {
        mainClasses: 'show'
      }
    }
  });
  this.render('Search');
});

Router.route('/other', function() {
  this.render('Other');
});
<template name="_layout">
  <main class="{{mainClasses}}">
    {{>yield}}
  </main>
</template>

To me, this is a more logical flow of data because the layout only has to worry about what it is given.

Router -> Template

If this was done with a helper, then the template has ask the helper to get information from the router and compare it to decide whether it wants to use a certain class or not.

Template -> Helper -> Router -> Comparison -> Template

Upvotes: 1

halbgut
halbgut

Reputation: 2386

You'll need to write a helper. Here's an example of what you could do:

client/helper.js

Template.registerHelper('routeClass', function () {
  return Router.current().route.getName()
  }
})

client/template.html

<main class="{{ routeClass }}" ></main>

Upvotes: 1

Related Questions