How to create a navigation bar in a logical template, such as a mustache

Question

I am trying to understand the concept of logical lesser tempos, but I am on the wall.

I want to implement a simple navigation bar, for example. The links "Home, About, Contacts" at the top of each page, and the "current" should be highlighted by another class (I use bootstrap). But how can I do this in a reasonable way? So far I:

• Move the navigation to each template and copy everything (not DRY, ugly).
• Use keys instead of values, i.e. render('home', { on_home_page: true }); from <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 store data with a 1-variable value.
• create navigation in the controller, i.e. go to { 'Home': {link: '/', active: false}, 'About: {link: '/about', active: true} } or similar. I don’t like this because it has the opposite problem without logical patterns. Now I have HTML-ful controllers ...

Given the options above, I like (2) the best. But what I would prefer is some way to check one variable, for example:

 // 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 am sure it has come all the time for mustache experts --- what is the best way to handle this?

Answer 1

There is no way to handle this with a vanilla mustache. You have two options to keep the data and the JSON template clean:

1- using Mustache, write a helper function so you can use it as follows:

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

(disclaimer: I wrote this assistant from my head, it may not work as it is, but I think you understand)

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

then mix this helper with JSON data, it is best to overload Mustache.render so that every render call adds your helper to the mix. Please note that leaving the class="" outside the auxiliary device, you can have several different classes for each menu item, while maintaining your “logic” for the active part.

2- switch to Handlebars , which allows such basic logic. Handlebars is a superset of Mustache, material that works on a vanilla mustache will work directly in Handlebars, so updating is easy. Be careful, although after updating and changing your templates for working with Handlebars there is no return.

Answer 2

I just wrote a post about this. Click here or on the banner:

The basic idea for doing this with a vanilla mustache and NodeJS looks like this:

 app.get('/Portfolio', function(req, res) { res.render('portfolio.html', { Portfolio: 'class="current"', }); }); app.get('/Blog', function(req, res) { res.render('blog.html', { Blog: 'class="current"', }); }); 

Notice how each individual route sends a different mustache variable. If the user goes to / Portfolio, the {{{Portfolio}}} variable will exist, but the {{{Blog}}} variable will not exist.

Using this idea, customize your navigation links as follows:

 <div id="nav"> <ul> <li><a href="/Portfolio" {{{ Portfolio }}}>Portfolio</a></li> <li><a href="/Blog" {{{ Blog }}}>Blog</a></li> </ul> </div> 

Create a .current class

 #nav li a.current { font-weight: 900; } 

Now the link will be highlighted depending on the routing call made.