Meteor supports Handlebars syntax with some extensions and clarifications.
In this section we will be covering how to create a handlebars helper. For a more complete description of Handlebars templates please see the [meteor wiki page covering Handlebars
Create a file called helpers.js with the following contents:
client/helpers.js
(function () {
// Navigation helpers
var isNavActive = function (page, matchTop) {
var isActive = false;
// If desired check that the top level matches
if (matchTop) {
var pathTop = page.split('/')[0];
var currentPageTop = Meteor.Router.page().split('/')[0];
if (pathTop === currentPageTop || _.contains(pathTop.split('|'), currentPageTop))
isActive = true;
}
// Is it a perfect match
var currentPage = Meteor.Router.page();
if (currentPage === page)
isActive = true;
return isActive;
};
Handlebars.registerHelper('isActive', function (page) {
return isNavActive(page, false) ? 'active' : '';
});
Handlebars.registerHelper('isActiveTop', function (page) {
return isNavActive(page, true) ? 'active' : '';
});
})();
We are defining two helper methods isActiveTop and isActive. Each of these methods take a page var that corresponds to a template name, it sends that value to isNavActive method. If the method returns true it return the string 'active', if isNavActive returns false it returns an empty string ''. What we are really doing is returning a string for the class name.
With the isActiveTop method you may optionally pass a list of templates to match. For example if you called isActiveTop "postList|postDetail" the return value will be 'active' if either "postList" template or "postDetail" template are the current Router.page() value. Remember this value is set base on the url.
Now create a navigation menu that uses the 'isActiveTop' helper:
client/views/app.hmtl
<head>
<title>Meteor Blog</title>
</head>
<body>
<div class="container" role="main">
<div class="page-header">
<div class="row">
<div class="span3">
<a href="/">
<h1>Meteor Blog</h1>
</a>
</div>
<div class="span9">
<ul class="nav nav-pills nav-main">
<li class="{{isActiveTop "home"}}"><a class="nav-link" href="/">Home</a></li>
<li class="{{isActiveTop "postList|postDetail"}}"><a class="nav-link" href="/posts">Posts</a></li>
<li class="{{isActiveTop "adminHome"}}"><a class="nav-link" href="/admin">Admin</a></li>
</ul>
</div>
</div>
</div>
<div class="content">
{{renderPage}}
</div>
</div>
</body>
Now visit http://localhost:3000 you should see the nav with the "Home" item selected.