How to make a nav

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, eg "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:

Move the nav to every template, and copy the whole thing (not DRY, ugly).

Use keys instead of values, ie 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.

create the nav in the controller, ie 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?

---

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.

---

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

The basic idea for doing this with vanilla moustache and NodeJS is like so:

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 separate route sends a different moustache variable. If a user goes to /Portfolio the {{{Portfolio}}} variable will exist but the {{{Blog}}} variable won't.

Using this idea, set up your navigation links like so:

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

Create the .current class

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

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

链接地址: http://www.djcxy.com/p/59374.html

上一篇: 在Hibernate中，关系所有者意味着什么？

下一篇: 如何制作导航