Question

以下Pug脚本：

- data = [ "A", "B", "C", "D" ]
- for (i=0,i<data.length;i++)
-  var even = (i%2)==0
   if even
     .row
       .col #{data[i]}
   else
       .col #{data[i]}

产生

<div class="row"> 
   <div class="col">A</div>
</div>
<div class="col">B</div>
<div class="row"> 
   <div class="col">C</div>
</div>
<div class="col">D</div>

我想要的是：

<div class="row"> 
   <div class="col">A</div>
   <div class="col">B</div>
</div>
<div class="row"> 
   <div class="col">C</div>
   <div class="col">D</div>
</div>

为什么else块中的缩进没有被遵循？如何实现所需的输出？

Answer 1

帕格，从本质上讲，并不允许那种额外的＆＃34; else块内的缩进。为了达到理想的效果，你可以这样考虑 -

- var data = [ "A", "B", "C", "D" ]

each datum, index in data
  if ((index % 2) == 0)
    .row
      .col #{datum}
      if (data[index + 1])
        .col #{data[index + 1]}

- 产生 -

<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
</div>
<div class="row">
  <div class="col">C</div>
  <div class="col">D</div>
</div>

Answer 2

虽然肖恩的回答是正确的，但它确实包含代码重复，因为您必须指定要对项目执行的操作，每行两次。对于每排需要两件以上物品的情况，他的答案也不适合。

我建议使用第二个循环来查找必须落入此行的所有项目，而不是使用sean的[i + 1]结构。这可以使用以下模式完成：

- var itemsPerRow = 2; // This can be any positive number
each unused, i in data
  if (i % itemsPerRow == 0)
    .row
      each item, j in data
        if (j - i >= 0 && j - i < itemsPerRow)
          .col
             .. What you want to do with -item- ..

第if (j - i >= 0 && j - i < itemsPerRow)行确保只有实际落入该行的项目才能呈现。

这可以避免代码重复，因为您只需要输入.. What you want to do with -item- ..一次。

结果如下所示

.row
  .col
  .col
.row
  .col
  .col
.row
  .col
  .col

else块中的缩进是否从then块继续？

2 个答案: