如何在像胡子一样的无逻辑模板引擎中制作导航栏

Question

我正在努力理解无逻辑的temlpates背后的概念，但我发现自己碰壁了。

我想实现一个简单的导航栏，例如“Home，About，Contact”链接位于每个页面的顶部，而“当前”链接应该用不同的类突出显示（我正在使用bootstrap）。但是我怎么能以明智的方式做到这一点呢？到目前为止，我有：

1. 将导航移动到每个模板，并复制整个事物（不是DRY，丑陋）。
2. 使用键而不是值，即render('home', { on_home_page: true });和<a href="/" {{#on_home_page}}class="active"{{/on_home_page}}>Home</a>。这是更好的，但仍然很烦人，我必须创建N个变量来保存1变量的数据。
3. 在控制器中创建导航，即传入{ 'Home': {link: '/', active: false}, 'About: {link: '/about', active: true} }或类似内容。我不喜欢这个，因为它有无逻辑模板的相反问题。现在我有HTML-ful控制器......

鉴于上述选项，我最喜欢（2）。但我更喜欢用某种方法来检查一个变量，例如：

// 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>

我确信这对于小胡子专家来说是所有的时间 - 处理它的最佳方法是什么？

Answer 1

使用香草胡子无法解决这个问题。 您有两个选项可以让您的JSON数据和模板保持干净：

1-使用Mustache，编写一个帮助函数，以便您可以像这样使用它：

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

（免责声明：我把这个帮手写成了我的头脑，可能不会按原样运作，但我认为你明白了这一点）

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

然后将帮助器混合到您的JSON数据中，最好的方法可能是重载Mustache.render，以便每次调用render都会将您的助手添加到混音中。请注意，将class=""部分留在帮助程序之外允许您在每个菜单项上有多个不同的类，同时仍然具有活动部分的“逻辑”。

2-切换到Handlebars，允许这种基本逻辑。 Handlebars是Mustache的超集，在香草上使用的东西Mustache将直接在Handlebars中工作，因此升级很容易。但要小心，一旦你升级和修改你的模板以使用Handlebars就没有回头了。

Answer 2

我刚刚写了一篇关于此的帖子。点击here或横幅：

使用vanilla小胡子和NodeJS这样做的基本思路是这样的：

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"',
    });
});

注意每个单独的路由如何发送不同的mustache变量。如果用户转到/ Portfolio，{{{Portfolio}}}变量将存在，但{{{Blog}}}变量不会。

使用这个想法，设置导航链接如下：

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

创建.current类

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

现在，链接将突出显示，具体取决于所做的路由调用。