循环时意外 <tr>

Unexpected <tr> when looping

我有一个数组 @iterated_orders 像这样:

[[1, "Don", 3], [nil, nil, 4], [2, "Vri", nil]]

在我看来代码是这样的:

    %table
      - @iterated_orders.each do |day, day_name, order_id|
        - unless day.blank?
          %tr
            %td.day= day
        %td= order_id

我希望它输出这个 html:

<tr>
  <td class="day">1 Don</td>
  <td>3</td>
  <td>4</td>
</tr>
<tr>
  <td class="day">2 Vri</td>
  <td></td>
  <td></td>
</tr>

但它输出这个 HTML:

<tr>
  <td class="day">1 Don</td>
  <td></td>
</tr>
<tr>
  <td>3</td>
  <td>4</td>
</tr>
<tr>
  <td class="day">2 Vri</td>
  <td></td>
</tr>
<tr>
  <td></td>
</tr>

为什么多了一个<tr><td>加了order_id不加到已有的<tr>上吗?

您的 Haml 实际呈现:

<table>
  <tr>
    <td class='day'>1</td>
  </tr>
  <td>3</td>
  <td>4</td>
  <tr>
    <td class='day'>2</td>
  </tr>
  <td></td>
</table>

当您在浏览器中查看它时,浏览器会将其更正为有效 HTML,包括添加额外的 tr 元素,我怀疑这是您看到结果的地方(尽管我在 Chrome).

中得到不同的东西

带有 order_idtd 不会添加到之前的 tr 中,因为那个 tr 已在该点关闭。您的 Haml 显示为“除非 day 为空白,否则插入包含带有日期的单元格的新行(并关闭它),然后插入一些带有 order_id 的 table 单元格”。

实现您尝试使用 Haml 的最佳方式是首先将您的数据转换为与您的预期输出相匹配的形式。熟悉Enumerable methods can help here. In particular in this case chunk_while大概就是我们想要的:

@sorted_orders = @iterated_orders.chunk_while {|before, after| after[0].blank? }

现在您可以迭代此结构以生成 HTML:

%table
  - @sorted_orders.each do |day|
    %tr
      -# the first sub-array contains the day:
      %td.day #{day[0][0]} #{day[0][1]}
      -# then add a td for each order_id (including the first):
      - day.each do |d|
        %td= d[2]

这会产生(使用您的示例数据):

<table>
  <tr>
    <td class='day'>1 Don</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td class='day'>2 Vri</td>
    <td></td>
  </tr>
</table>

这与您的目标不完全相同(您在第二行有一个额外的 td)。您可能需要更多地修复数据才能获得每天相同数量的元素。