Question

提前感谢您抽出宝贵时间尝试提供帮助。我在node.js中使用Jade模板引擎，并希望生成一个HTML表，其中行分为多个部分（tbody标签）。

假设我在内存中有以下对象：

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

（为简单起见，我们假设数组是由“类型”列预先订购的。）

我想为每个“类型”（Fruit vs. Vegetable）生成一个包含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>

我想我希望我的玉看起来像：

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>

Answer 2

from cogs import _json as jsonModule

你应该用pug basic formate列出以下流程

如何生成包含Jade部分的表格？

2 个答案: