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

【问题标题】：How to make a nav-bar in logic-less template engine like mustache如何在像胡子这样的无逻辑模板引擎中制作导航栏
【发布时间】：2012-05-08 16:22:26
【问题描述】：

我试图理解无逻辑模板背后的概念，但我发现自己碰壁了。

我想实现一个简单的导航栏，例如每个页面顶部的“主页、关于、联系方式”链接，“当前”链接应该用不同的类突出显示（我使用的是引导程序）。但是我怎样才能以一种明智的方式做到这一点呢？到目前为止，我有：

将导航移动到每个模板，并复制整个内容（不是 DRY，丑陋）。
使用键而不是值，即render('home', { on_home_page: true }); 和<a href="/" {{#on_home_page}}class="active"{{/on_home_page}}>Home</a>。这样更好，但仍然很烦人，因为我必须创建 N 个变量来保存 1 个变量的数据。
在控制器中创建导航，即传入{ '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>

我相信这所有胡子专家都会遇到 --- 最好的处理方法是什么？

【问题讨论】：

标签： javascript templates mustache

【解决方案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 的超集，适用于 vanilla Mustache 的东西将直接在 Handlebars 中工作，因此升级很容易。但请注意，一旦您升级和修改了模板以使用 Handlebars，就没有回头路了。

【讨论】：

我偶然发现了这一点，并注意到该函数不会返回参数。您实际上需要提供一个提供参数的回调。懒人小提琴：jsfiddle.net/dN4Z8
它实际上应该是{{#selected_item}}home{{/selected_item}}，但遗憾的是我找不到其他 4 个字符来更新原始帖子……嗯。干得好！

【解决方案2】：

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

用 vanilla mustache 和 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;
}

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

【讨论】：