Мопс: Как добавить интерполяцию для идентификатора?

Question

Изначально код такой:

.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%")

Я хочу преобразовать его в цикл.Как мне сделать с идентификатором для каждой вкладки?

.tab-content
    each num in sessionsNumber
        if num == 1
            #session+num.tab-pane.active(role='tabpanel')
                table#myTable+num.table.table-striped.table-bordered(cellspacing="0" width="100%")
        else
            #session+num.tab-pane(role='tabpanel')
                table#myTable+num.table.table-striped.table-bordered(cellspacing="0" width="100%")

Это неправильно.Я попробовал несколько вариантов и не могу сделать это правильно.

Любая помощь будет оценена!

Answer 1

Чтобы динамически установить идентификатор, используйте синтаксис атрибута id (id='myId') вместо сокращения id #myId:

.tab-content
    each num in sessionsNumber
        if num == 1
            #session1.tab-pane.active(role='tabpanel')
                table.table.table-striped.table-bordered(id=`myTable${num}`,cellspacing='0', width='100%')
        else
            .tab-pane(id=`session${num}`, role='tabpanel')
                table.table.table-striped.table-bordered(id=`myTable${num}`, cellspacing='0', width='100%')

Вот более чистый подход к добавлению этого "активного" класса для первой вкладки.панель с использованием троичного оператора javascript , чтобы вам не приходилось повторять разметку таблицы:

.tab-content
    each num in sessionsNumber
        .tab-pane(id=`session${num}`, class= (1 == num) ? 'active' : '', role='tabpanel')
            table.table.table-striped.table-bordered(id=`myTable${num}`, cellspacing='0', width='100%')

Не забывайте запятую отдельные атрибуты в pug.