7

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

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

  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>

我敢肯定，对于胡须专家来说，这个问题一直存在——处理它的最佳方法是什么？

4

2 回答 2

4

没有办法使用香草胡子来处理这个问题。您有两个选项可以让您的 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 是 Mustache 的超集，适用于 vanilla Mustache 的东西将直接在 Handlebars 中使用，因此升级很容易。不过要小心，一旦您升级和修改了模板以使用 Handlebars，就没有回头路了。

于 2012-05-11T18:53:30.907 回答
0

我刚刚写了一篇关于这个的帖子。单击此处或在横幅上：

使用 mustacheJS 教程突出显示当前链接

使用 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;
}

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

于 2015-06-29T03:23:45.673 回答