如何延迟 Jade 模板中的结束标签？答案

【问题标题】：How can I delay the closing tag in a Jade template?如何延迟 Jade 模板中的结束标签？
【发布时间】：2014-03-31 09:14:18
【问题描述】：

我遇到了 Jade 和 Bootstrap 的问题。我正在尝试以这种格式布局一些 HTML：

<bootstrap row>
   <bootstrap col-sm-6>
   <bootstrap col-sm-6>
</bootstrap row>
<bootstrap row>
   <bootstrap col-sm-6>
   <bootstrap col-sm-6>
</bootstrap row>

等等……

我需要在每个语句中发生这种情况，但是我无法让它完全按照我的意愿工作。每次迭代后它都会关闭该行，所以我得到：

<bootstrap row>
   <bootstrap col-sm-6>
</bootstrap row>
<bootstrap row>
   <bootstrap col-sm-6>
</bootstrap row>

这是我目前拥有的 Jade 模板：

div.col-sm-12
  #items
    - each item, x in items
      div.article.col-sm-6
        div.title
          h3= item.name + " (" + item.cost + ")"
          p= item.stats
          p= item.recipe
          p= item.ability
          p= "Purchased from " + item.category

因此，对于每 2 次迭代，我需要将两个 col-sm-6 项包装成一行。

任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： node.js twitter-bootstrap pug

【解决方案1】：

一种方法是仅在索引为偶数时渲染item，并在该条件下渲染下一个项目。比如：

.col-sm-12                   
  #items                     
    - var items = ['a', 'b', 'c', 'd'] 
    - each item, index in items
      if 0 === index % 2  
        .row                 
          - var nextItem = items[index + 1] 
          .col-sm-6= item                                                                                                                                  
          .col-sm-6= nextItem

输出：

<div class="col-sm-12">
  <div id="items">
    <div class="row">
      <div class="col-sm-6">a</div>
      <div class="col-sm-6">b</div>
    </div>
    <div class="row">
      <div class="col-sm-6">c</div>
      <div class="col-sm-6">d</div>
    </div>
  </div>
</div>

当然，由于您的 item 和 nextItem 不像此示例那么简单，因此您可能需要使用部分渲染每个值，并为其值提供适当的标记。

【讨论】：