javascript – 如何在像胡子一样的无逻辑模板引擎中创建导航栏

我试图理解无逻辑的temlpates背后的概念,但我发现自己撞墙了.

我想实现一个简单的导航栏,例如“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,就没有回头路了.

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...