使用Handlebars.js的下拉式导航菜单
使用Handlebars.js的下拉式导航菜单
提问于 2016-07-28 04:58:23
Handlebars.js似乎是一个很好的解决方案，但是我在尝试向一些标记添加示例模型时遇到了问题。
我正在尝试创建一个带有下拉列表的顶级导航，但嵌套的each帮助器有问题。
JSON文件：
{
"modifier": "",
"decorator": "",
"title": "Main Navigation",
"main-nav-items": [
{
"nav-id": 0,
"nav-link": "/en",
"nav-text": "Home",
"active": "class=\"active\""
},
{
"nav-id": 1,
"nav-link": "/en/about-launch-sitecore",
"nav-text": "About Launch Sitecore",
"dropdown": "class=\"dropdown\"",
"dropdown-toggle": "class=\"dropdown-toggle\" data-toggle=\"dropdown\"",
"dropdown-caret": "<b class=\"caret\"></b>"
},
{
"nav-id": 2,
"nav-link": "/en/team",
"nav-text": "Team"
},
{
"nav-id": 3,
"nav-link": "/en/glossary",
"nav-text": "Glossary"
},
{
"nav-id": 4,
"nav-link": "/en/contact-us",
"nav-text": "Contact Us"
}
],
"sub-nav-items": [
{
"nav-id": 0,
"nav-link": "/en/about-launch-sitecore/getting-started",
"nav-text": "Getting Started"
},
{
"nav-id": 1,
"nav-link": "/en/about-launch-sitecore/our-strategy",
"nav-text": "Our Strategy"
},
{
"nav-id": 2,
"nav-link": "/en/about-launch-sitecore/building-the-site",
"nav-text": "Building the Site"
},
{
"nav-id": 3,
"nav-link": "/en/about-launch-sitecore/optimizing-the-experience",
"nav-text": "Optimizing the Experience"
},
{
"nav-id": 4,
"nav-link": "/en/about-launch-sitecore/sitecore-8",
"nav-text": "Sitecore 8"
}
]
}HTML代码(使用Bootstrap 2.3.2)：
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
{{#each main-nav-items}}
<li id="ctl05_rptDropDownMenu_MenuLi_{{nav-id}}"{{#if active}} {{{active}}}{{/if}}{{#if dropdown}} {{{dropdown}}}{{/if}}>
<a id="ctl05_rptDropDownMenu_MenuLink_{{nav-id}}"{{#if dropdown-toggle}} {{{dropdown-toggle}}}{{/if}} href="{{nav-link}}">{{nav-text}}{{#if dropdown-caret}} {{{dropdown-caret}}}{{/if}}</a>
{{#if dropdown}}
<ul class="dropdown-menu">
{{#sub-nav-items}}
<li id="ctl05_rptDropDownMenu_ctl00_1_MenuLi_{{nav-id}}">
<a id="ctl05_rptDropDownMenu_ctl00_1_MenuLink_{{nav-id}}" href="{{nav-link}}">{{nav-text}}</a>
</li>
{{/sub-nav-items}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>即使带有下拉菜单的导航具有正确的条件，我也无法让sub-nav-items进行渲染。
客户端模板对我来说还是一个相对较新的事物，所以在这个解决方案中也欢迎任何其他的格式化技巧和最佳实践。
回答 1
Stack Overflow用户
发布于 2016-07-28 08:25:02
答案似乎是on the homepage under Paths，但并不明显。我需要做的是在sub-nav items上添加一个查找路径，以便它在当前数组之外搜索sub-nav-items：
{{#each ../sub-nav-items}}
<li id="ctl05_rptDropDownMenu_ctl00_1_MenuLi_{{nav-id}}">
<a id="ctl05_rptDropDownMenu_ctl00_1_MenuLink_{{nav-id}}" href="{{nav-link}}">{{nav-text}}</a>
</li>
{{/sub-nav-items}}这样做的原因是因为each查找只搜索当前数组项中的表达式。它可以很好地找到下拉无序列表元素，但找不到sub-nav-items，因为它不存在于迭代数组项中。sub-nav-items存在于迭代项的上一层。Handlebar认为子导航项目作为数组项目内的节点存在。
作为Handlebar和更高级编程的新手，这对我来说并不明显，所以我不明白为什么它不能定位sub-nav-items。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38623063
复制相关文章
相似问题
腾讯云开发者
