如何在玉中进行嵌套迭代？

Question

ul
    li
        a(href='') menu1
    li
        a(href='') menu2
        ul
            li
                a(href='') sub-menu2
    li
        a(href='') menu3
        ul
            li
                a(href='') sub-menu3
                ul
                    li
                        a(href='') secondary-submenu3

这就是我想要实现的目标，而不是编写上面的 jade 代码，我希望能够使用循环生成它。我尝试了 jade 文档，示例只显示了一层循环。例如。我可以试试这个

-var menus = [ 'menu1', 'menu2', 'menu3' ];
ul
    each menu in menus
        li
            a(href='') #{menu}

但这还不够。如果我试试这个

-var submenus = [ 'sub-menu1', 'sub-menu2', 'sub-menu3' ];
ul
    each menu in menus
        li
            a(href='') #{menu}
            ul
                each submenu in submenus
                li
                    a(href='') #{submenu}

如果每个菜单项具有相同数量的子菜单项，这可能会起作用。但在我的例子中，每个菜单项的子菜单项数量不同。我该如何解决这个问题？如何在 jade 中进行嵌套迭代？

Answer 1

你需要这个结构的对象，例如：

本地人：

{
  menus: {
    m1: ['a', 'b', 'c', 'd'],
    m2: ['x', 'y', 'z'],
    m3: ['i', 'ii']
  }
}

那么你可以使用这个模板：

ul
  each menuKey in Object.keys(menus)
    - menu = menus[menuKey]
    li
      a(href='')=menuKey
        ul
          each submenu in menu
            li
              a(href='') #{submenu}

你可以在这个网站上试试这个：http://jade-lang.com/demo/ 将模板复制粘贴到左上角，将本地文本粘贴到右上角的文本区域。

如何在玉中进行嵌套迭代？

How to do nested iterations in jade?

html

javascript

node.js

express

pug