Joined June 2013
·

Joey Geralnik

Israel
·
·

Posted to Active links in Meteor over 1 year ago

If you're using meteor-router you can use Meteor.Router.path() to get the named path of the current page. You can then wrap the whole li in a handlebar helper:

Handlebars.registerHelper('navLink', function(page, icon) {
  var ret = "<li ";
  if (Meteor.Router.page() == page) {
    ret += "class='active'";
  }
  ret += "><a href='" + Meteor.Router.namedRoutes[page].path + "'><i class='" + icon + " icon-fixed-width'></i></a></li>";
  return new Handlebars.SafeString(ret);
});
</code>
</pre>
The icon can be replaced with text according to your needs. This can then be used like so:

<ul class="nav pull-right">
{{navLink 'booksList' 'icon-book'}}
{{navLink 'projectsList' 'icon-edit'}}
{{navLink 'info' 'icon-info'}}
</ul>
</code>
</pre>

This has the benefit of replacing the ugly curPath function with pages that meteor-router knows and prevents the repeated /some/page present in your code
Achievements
61 Karma
0 Total ProTip Views
Interests & Skills