How to make a nav-bar in logic-less template engine like mustache

Question

I am trying to understand the concept behind logic-less temlpates, but I'm finding myself hitting a wall.

I want to implement a simple navigation bar, e.g. "Home, About, Contact" links at the top of every page, and the "current" one should be highlighted with a different class (I'm using bootstrap). But how can I do this in a sensible fashion? So far I have:

1. Move the nav to every template, and copy the whole thing (not DRY, ugly).
2. Use keys instead of values, i.e. render('home', { on_home_page: true }); with <a href="/" {{#on_home_page}}class="active"{{/on_home_page}}>Home</a>. This is better, but still annoying that I have to create N variables to hold 1-variable worth of data.
3. create the nav in the controller, i.e. pass in { 'Home': {link: '/', active: false}, 'About: {link: '/about', active: true} } or similar. I dislike this because it has the opposite problem of logic-less templates. Now I have HTML-ful controllers...

Given the above options, I like (2) the best. But what I would prefer is some way to have a single variable to check, like:

// controller
render('about', {active: 'about'});
render('home', {active: 'home'});

// mustache nav
<a href="/" {{#if active == 'home'}}class="active"{{/if}}>Home</a>
<a href="/about" {{#if active == 'about'}}class="active"{{/if}}>About</a>

I'm sure this comes up all the time for mustache experts --- what's the best way to deal with it?

Answer 1

There's no way to deal with this using vanilla Mustache. You have two options that let your JSON data and template stay clean:

1- using Mustache, write a helper function so that you can use it like this:

var selected_item = function(param) {
    if (param == this.active) {
        return 'active';
    }
};

(disclaimer: I wrote this helper out of the top of my head, might not work as-is but I think you get the point)

<a href="/" class="{{#selected_item}}home{{/selected_item}}">Home</a>
<a href="/about" class="{{#selected_item}}about{{/selected_item}}">About</a>

then mix-in that helper into your JSON data, best way probably being overloading Mustache.render so that every call to render adds your helper into the mix. Notice that leaving the class="" part outside of the helper allows you to have multiple different classes on each menu item while still having your "logic" for the active part.

2- switch to Handlebars which allows for this kind of basic logic. Handlebars is a superset of Mustache, stuff that works on vanilla Mustache will directly work in Handlebars so upgrading is easy. Be careful though, that once you have upgraded and modified your templates to work with Handlebars there's no turning back.