我想实现一个简单的导航栏,例如“Home,About,Contact”链接位于每个页面的顶部,“current”链接应该用不同的类突出显示(我正在使用bootstrap).但是我怎么能以明智的方式做到这一点呢？到目前为止我有：
>将导航移动到每个模板,并复制整个事物(不是DRY,丑陋).
>使用键而不是值,即render(‘home’,{on_home_page：true}); with< 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>
我确信小胡子专家一直都会出现这种情况 – 处理它的最佳方法是什么？
解决方法
您有两个选项可以让您的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的超集,在香草上使用的东西Mustache将直接在Handlebars中工作,因此升级很容易.但是要小心,一旦你升级和修改你的模板以使用Handlebars,就没有回头路了.
