如何制作导航

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

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

将导航移到每个模板，并复制整个事物（不干，丑陋）。

使用键而不是值，即render('home', { on_home_page: true }); 与<a href="/" {{#on_home_page}}class="active"{{/on_home_page}}>Home</a> 。 这样比较好，但仍然很烦人，我必须创建N个变量来保存一个变量值的数据。

在控制器中创建nav，即传入{ '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>

我敢肯定，这来了所有的小胡子专家的时间---什么是对付它的最好办法？

---

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

1-使用胡子，写一个辅助函数，以便你可以像这样使用它：

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=""外部的class=""部分留在外部，可让您在每个菜单项上都有多个不同的类，同时仍然有活动部分的“逻辑”。

2-切换到允许这种基本逻辑的Handlebars。 把手是胡须的超集，在香草胡须上工作的东西将直接在把手上工作，因此升级很容易。 但要小心，一旦您升级并修改了模板以使用Handlebars，则不会退后。

---

我刚刚写了一篇文章。 点击这里或横幅上：

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

注意每条单独的路由如何发送不同的胡须变量。 如果用户转到/投资组合， {{{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;
}

现在，链接将根据路由呼叫进行高亮显示。

链接地址: http://www.djcxy.com/p/59373.html

上一篇: How to make a nav

下一篇: Don’t Use Accessor Methods in Initializer Methods and dealloc