CODEWITHSUNDEEP
meteor
Will Hua
Will Hua

Reputation: 1748

MeteorJS making a class have a status on click

Say that when I have 5 links on the toolbar and there's a table in the middle of the page.

enter image description here

As of right now I plan on making this a single page application. When I click a link on the left (Say from Entertainment to All) I would like it to be highlighted such as the All link on the left. The contents of the table will then change based on the link highlighted on the left.

Ex: If I click entertainment, only the categories with entertainment will be showed.

The highlighted status is due to having the "active" class for that particular div.

How would you implement that in MeteorJS? I can only figure out how to implement it with JQuery

Upvotes: 0

Views: 139

Answers (1)

Joel Tadmor
Joel Tadmor

Reputation: 121

One of the nice things that Meteor offers is session variables, changed and accessed via something like:

Session.set('activeLink', 'All')
Session.get('activeLink')

Meteor is automatically set to listen to Session variables and update your template helper functions when they change, so all you'd have to do is set your HTML to have a class equal to a helper function:

<a class={{isActive}}>

Then the helper would be something like:

Template.navLink.helpers({
    "isActive": function() {
          if (Session.get('activeLink') === Template.currentData().linkText) { 
              return "activeLink"
          }
    }
})

(Or however it is that you are storing the link information in the data context of each link).

Upvotes: 2

Related Questions