Question

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。

客户端模板对我来说仍然相对较新，因此在解决方案中也欢迎任何其他格式提示和最佳实践。

Answer 1

答案似乎是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存在于迭代项目上方的图层。 Handlebars认为sub-nav-items作为数组项中的节点存在。

作为Handlebars和更高级别编程的菜鸟，这对我来说并不明显，所以我不明白它为什么找不到sub-nav-items。

使用Handlebars.js下拉菜单的导航菜单

1 个答案: