Javascript 如何在无逻辑模板引擎（如Mustach）中制作导航条

我试图理解无逻辑temlpate背后的概念，但我发现自己遇到了麻烦

我想实现一个简单的导航栏，例如在每个页面顶部的“Home、About、Contact”链接，“current”链接应该用不同的类突出显示（我使用的是bootstrap）。但我如何才能明智地做到这一点？到目前为止，我已经：

将导航移动到每个模板，并复制整个内容（不干燥、丑陋）

使用键而不是值，即

render（'home'，{on_home_page:true}）与
。这更好，但仍然很烦人，我必须创建N个变量来保存1个变量的数据

在控制器中创建导航，即传入

{Home':{link:'/'，active:false}，'About:{link:'/About'，active:true}

或类似内容。我不喜欢这个，因为它有相反的问题，即没有逻辑的模板。现在我有了HTML的控制器

鉴于上述选择，我最喜欢（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>

//控制器
render（'about'，{active:'about'}）；
渲染（'home'，{active:'home'}）；
//胡子导航

---

我敢肯定，这是胡子专家们的最佳时机——最好的解决办法是什么？

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

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

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

（免责声明：我写这个助手是出于我的想法，可能无法正常工作，但我想你明白了）

然后将该助手混合到JSON数据中，最好的方法可能是重载

Mustache.render

，这样每次调用

render

都会将助手添加到混合中。请注意，将

class=”“

部件放在辅助对象之外，允许您在每个菜单项上有多个不同的类，同时仍保留活动部件的“逻辑”

---

2-允许这种基本逻辑的开关。车把是胡子的超集，香草胡子上的东西将直接在车把上工作，所以升级很容易。不过要小心，一旦你升级和修改了你的模板来使用车把，就没有回头路了。

我刚刚写了一篇文章。单击或在横幅上单击：

香草小胡子和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"',
    });
});

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

请注意，每个单独的管线如何发送不同的小胡子变量。如果用户转到/Portfolio，

{{{{Portfolio}}}

变量将存在，但

{{{{Blog}}}

变量将不存在

使用此想法，按如下方式设置导航链接：

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

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

---

现在，链接将根据所做的路由调用突出显示。

我偶然发现了这一点，并注意到该函数不会返回参数。实际上，您需要提供一个回调函数来提供参数。Lazy fiddle：它实际上应该是

{{{{selected_item}}home{{/selected_item}}

，但我很遗憾地找不到其他4个字符来更新原始帖子……啊，好吧。干得好！