循环时意外 <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_id
的 td
不会添加到之前的 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
)。您可能需要更多地修复数据才能获得每天相同数量的元素。
我有一个数组 @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_id
的 td
不会添加到之前的 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
)。您可能需要更多地修复数据才能获得每天相同数量的元素。