pug - Jade 在循环中解释变量

Question

我有一个重复四次的简单 block ，每个 block 都有相应的变量名称，这些名称将增加 1。

所以我想也许我可以只循环 4 次并以某种方式解释变量，这样它就可以工作，而不是复制 block 4 次并以编程方式更改变量名称。

这是我的 block 的例子

div.tile_content.tile_tax_form_bottom_bar
    h3.form_headline!= keys.global.faq
    div#tax.panel-group.custom-panel
        div.panel.panel-default
            div.panel-heading
                h4.panel-title
                    a.collapsed(href='#tax-1', data-toggle='collapse', data-parent='#tax')
                        i.fa.fa-times-circle
                        i.fa.fa-plus-circle
                        != keys.tax.faq_q1
            div#tax-1.panel-collapse.collapse
                div.panel-body
                    p!= keys.tax.faq_a1

如您所见，我有一些 id 参数作为 tax-{i} 但更大的问题是存储翻译的 keys 对象，例如keys.tax.faq_a{i}。

这样的事情是否可能，或者我应该将其复制四次并改为硬编码吗？

Answer 1

假设这是您传递的数据的基本表示(如果假设错误请原谅)

-var keys = {global: {faq: 'faq'}, tax:{'faq_a1': 'a', 'faq_a2': 'b', 'faq_a3':'c', 'faq_a4': 'd'}}

这会起作用:

-for(var i=1; i<5; i++)
   -var taxId = '#tax-' + i;
   -var keyId = 'faq_a' + i;
   div.tile_content.tile_tax_form_bottom_bar
      h3.form_headline!= keys.global.faq
      div#tax.panel-group.custom-panel
         div.panel.panel-default
            div.panel-heading
               h4.panel-title
                  a.collapsed(href=taxId, data-toggle='collapse', data-parent='#tax')
                     i.fa.fa-times-circle
                     i.fa.fa-plus-circle
                     != keys.tax.faq_q1
            div.panel-collapse.collapse(id=taxId)
               div.panel-body
                  p!= keys.tax[keyId]

如果您不想在顶部声明变量，您可以尝试进行插值，这取决于个人喜好。我认为没有插值看起来更干净。

我在本地运行了它，它是根据您所描述的构建的。我会粘贴输出，但它有很多行。