node.js - 如何使用 Jade 生成包含部分的表格？

Question

预先感谢您抽出时间来提供帮助。我在 node.js 中使用 Jade 模板引擎，并希望生成一个 HTML 表，其中的行分组为多个部分(tbody 标记)。

假设我的内存中有以下对象:

[
    { type: 'Fruit', name: 'Apple' }
  , { type: 'Fruit', name: 'Orange' }
  , { type: 'Vegetable', name: 'Carrot' }
  , { type: 'Vegetable', name: 'Spinach'}
]

(为简单起见，我们假设数组是按“类型”列预先排序的)。

我想生成一个表，其中包含每个“类型”(水果与蔬菜)的 tbody 部分内每个对象的行。所以我尝试生成的 HTML 是:

<table>
<thead>
  <th>Type</th>
  <th>Name</th>
</thead>
<tbody id="Fruit">
  <tr>
    <td>Fruit</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Fruit</td>
    <td>Orange</td>
  </tr>
</tbody>
<tbody id="Vegetable">
  <tr>
    <td>Vegetable</td>
    <td>Carrot</td>
  </tr>
  <tr>
    <td>Vegetable</td>
    <td>Spinach</td>
  </tr>
</tbody>
</table>

我想我希望我的 Jade 看起来像这样:

table
  thead
    th Type
    th Name
  - var lastType;
  each o in objs
    - if(o.type != lastType)
      tbody(id='#{o.type}')
      - lastType = o.type;
    tr
      td #{o.type}
      td #{o.name}

但这会生成:

<table>
<thead>
  <th>Type</th>
  <th>Name</th>
</thead>
<tbody id="Fruit" />
<tbody>
  <tr>
    <td>Fruit</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Fruit</td>
    <td>Orange</td>
  </tr>
</tbody>
<tbody id="Vegetable" />
<tbody>
  <tr>
    <td>Vegetable</td>
    <td>Carrot</td>
  </tr>
  <tr>
    <td>Vegetable</td>
    <td>Spinach</td>
  </tr>
</tbody>
</table>

有什么想法吗？

Answer 1

这在Jade中有点难以猜测，因为我们并没有真正看到您的缩进是如何在本地代码中真正设置的，但是在这里(您发布的代码片段)似乎您的缩进是不对。

您应该尝试以下操作:+更新(添加另一个循环以获取每个主体下的所有相同类型)

table
    thead
        th Type
        th Name
    - var lastType;
    each o in objs
        - if (o.type != lastType)
            - lastType = o.type;
            tbody(id='#{o.type}')
                each t in objs
                    - if(t.type === lastType)
                        tr
                            td #{t.type} 
                            td #{t.name}

只需将两个 tr 标记移至您的 tbody 中，就像上面的代码示例一样。

+更新 现在将生成以下 HTML 代码:

<table>
  <thead>
    <th>Type</th>
    <th>Name</th>
  </thead>
  <tbody id="Fruit">
    <tr>
      <td>Fruit </td>
      <td>Apple</td>
    </tr>
    <tr>
      <td>Fruit </td>
      <td>Orange</td>
    </tr>
  </tbody>
  <tbody id="Vegetable">
    <tr>
      <td>Vegetable </td>
      <td>Carrot</td>
    </tr>
    <tr>
      <td>Vegetable </td>
      <td>Spinach</td>
    </tr>
  </tbody>
</table>