如何在Pug中使用循环创建Bootstrap togglable？

Question

这是我的代码

div
    ul.nav.nav-tabs(role='tablist')
            //- li.active(role='presentation')
            //-     a(href='#session1', aria-controls='session1', role='tab', data-toggle='tab') Session 1
            //- li(role='presentation')
            //-     a(href='#session2', aria-controls='session2', role='tab', data-toggle='tab') Session 2
            //- li(role='presentation')
            //-     a(href='#session3', aria-controls='session3', role='tab', data-toggle='tab') Session 3
            //- li(role='presentation')
            //-     a(href='#session4', aria-controls='session4', role='tab', data-toggle='tab') Session 4
            each num in !{sessionsNumber}
                li(role='presentation')
                    a(href='#session' + num, aria-controls='session' + num, role='tab', data-toggle='tab') Session #{num};
    .tab-content
            #session1.tab-pane.active(role='tabpanel')
                table#myTable1.table.table-striped.table-bordered(cellspacing="0" width="100%")
            #session2.tab-pane(role='tabpanel')
                table#myTable2.table.table-striped.table-bordered(cellspacing="0" width="100%")
            #session3.tab-pane(role='tabpanel')
                table#myTable3.table.table-striped.table-bordered(cellspacing="0" width="100%")
            #session4.tab-pane(role='tabpanel')
                table#myTable4.table.table-striped.table-bordered(cellspacing="0" width="100%")

我评论的部分按预期工作。但我想把它改成一个循环。 ！{sessionNumber}是我在Express后端呈现的内容。

 res.render('schedule', { sessionsNumber: JSON.stringify([1,2,3,4])})

我在其中一个脚本标记中使用document.reay调用了！{sessionsNumber}，并按预期将其显示为数组。我只是不确定当我将它更改为每个循环时它为什么不起作用。我还检查了页面，ul标签下没有html组件。

任何帮助将不胜感激！

Answer 1

res.render('schedule', { sessionsNumber: JSON.stringify([1,2,3,4])})将数组作为字符串发送到视图，因为你是json.stringifying它。这不是必要的。尝试只是发送像res.render('schedule', { sessionsNumber: [1,2,3,4]})这样的数组然后迭代它

each num in sessionsNumber
 li(role='presentation')
   a(href='#session' + num, aria-controls='session' + num, role='tab', data-toggle='tab') Session #{num}