用于遍历对象数组并创建具有无限子列表的列表的把手

Question

我有一个如下所示的数组：

  var menuItems = [
      {
        title: "title1",
        link: "link1",
        subMenu: [
          {
            title: "subMenu1",
            link: "subMenuLink1",
            subMenu: [
              {
                title: "subSubMenu1",
                link: "subSubLink1"
              },
              {
                title: "subSubMenu2",
                link: "subSubLink2"
              },
            ]
          },
          {
            title: "subMenu2",
            link: "subMenuLink2"
          },
        ]
      },
      {
        title: "title1",
        link: "link1"
      },
      {
        title: "title1",
        link: "link1"
      },
      {
        title: "title1",
        link: "link1"
      }
  ]

并且每个项目都可以有任意数量的子菜单。我想遍历它并在 HTML 中创建一个列表，其中包含嵌套列表以反映数据。像这样：

<ul>
  <li>
    <a href="#">title1</a>
    <ul>
      <li>
        <a href="#">subMenu1</a>
        <ul>
          <li>
            <a href="#">subSubMenu1</a>
          </li>
          <li>
            <a href="#">subSubMenu2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">subMenu1</a>
      </li>
    </ul>
  </li>
</ul>

我有以下内容：

  {{#each this}}
    <li>
        <a>
          {{this.title}}
        </a>
        {{#if subMenu}}
          <ul>
            {{#each subMenu}}
              <li>
                  <a>
                    {{title}}
                  </a>
              </li>
            {{/each}}
          </ul>
        {{/if}}
    </li>
  {{/each}}

但这将无法支持超过 2 个子菜单级别的任何内容。如果有人可以帮助我解决这个问题，或者指出我如何实现这一目标的正确方向。

Answer 1

您需要创建一个部分模板，我们称之为子菜单：

<li>
    {{this.title}}
    {{#if subMenu}}
        {{#each subMenu}}
        <ul>
            {{> submenu}}
        </ul>
        {{/each}}
    {{/if}}
</li>

然后在您的主模板中：

<ul>
{{#each this}}
    {{> submenu}}
{{/each}}
</ul>

您需要注册您的部分：

Handlebars.registerPartial('submenu', Handlebars.templates.submenu);

用于遍历对象数组并创建具有无限子列表的列表的把手

Handlebars to loop through array of objects and create a list with unlimited sublists

html

javascript

handlebars.js