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

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

使用普通 Mustache 无法解决这个问题。您有两个选项可以让您的 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 配合使用，就没有回头路了。