Pug（快速视图引擎）与条件嵌套答案

【问题标题】：Pug (express view engine) nesting with conditionalsPug（快速视图引擎）与条件嵌套
【发布时间】：2018-09-13 00:14:05
【问题描述】：

我使用 pug 作为我的 express（node js）视图引擎，但我遇到了一些条件问题。我使用网格框架进行通讯设计，其工作方式类似于引导网格，这意味着我有行和列。我每行需要两个项目，这需要每两个项目定义一个新行。我是这样尝试的：

each elem,index in elements
  - var even = index % 2;
  if(even)
    .row
      .column
  else
      .column

这并没有按预期工作，因为 else 列没有嵌套在行列中。我只能找到在这方面有点差的 pugjs.org 文档，那么有没有人有这方面的经验或更多文档的链接？非常感谢。

【问题讨论】：

你能添加你期望的 html 输出吗？

标签： express nested conditional pug rows

【解决方案1】：

将elements 分成两组。

- 
    const groupedElements = elements.reduce(function(acc, curr, index) {
        let isEven = (index + 1) % 2;
        if (isEven) {
            acc.push([curr]);
        } 
        else {
            acc[acc.length-1].push(curr);
        }
        return acc;
    }, []);

for group in groupedElements
    .row
    for item in group
        .col

【讨论】：

【解决方案2】：

Pug 忽略了额外的缩进，所以你写的内容被正确解释为：

each elem,index in elements
  - var even = index % 2;
  if(even)
    .row
      .column
  else
    .column

请注意，最后一个 .column 确实是 .row 的兄弟。

相反，试试这个——

each element, index in elements
  if !(index % 2)
    .row
      .column
      if (index + 1 < elements.length)
        .column

当索引为偶数时（记住它从 0 开始），请执行以下操作：

用一列渲染一个行元素
如果这不是最后一个元素，请添加第二列

当索引为奇数时，什么都不做（因为我们已经添加了第二列）。

请注意，即使看起来第二列将呈现为第一列的子列，if 语句的内容在 if 语句的缩进级别呈现 - 所以它们将是兄弟.

【讨论】：

这很好！ pug 可以遍历数组一次以构建行。