我是 Rails 新手,已经为此工作了好几个小时。我终于让它工作了,但我觉得我的解决方案有点老套,一点也不干。
我有一个布局,每 2 个项目需要一个新的 div。理想情况下,我想将其抽象为一个助手。
必须有更好的方法来做到这一点......
查看代码:
.column-group
.column
-Category.products.each_with_index do |category, index|
-if index == 0 || index == 1
%h1
=category.title
%ul
-category.components.each do |component|
%li
= link_to component.title, component
.column
-Category.products.each_with_index do |category, index|
-if index == 2 || index == 3
%h1
=category.title
%ul
-category.components.each do |component|
%li
= link_to component.title, component
.column
-Category.products.each_with_index do |category, index|
-if index > 3
%h1
=category.title
%ul
-category.components.each do |component|
%li
= link_to component.title, component
这会产生正确的 HTML:
<div class="column-group">
<div class="column">
<h1> Accessories</h1>
<ul>
<li><a href="/components/1">Charge & Connect</a></li>
</ul>
<h1>Bedroom</h1>
<ul>
<li><a href="/components/2">Beds</a></li>
<li><a href="/components/3">Chests</a></li>
<li><a href="/components/4">Dressers</a></li>
<li><a href="/components/5">Mirrors</a></li>
<li><a href="/components/6">Nightstands</a></li>
</ul>
</div>
<div class="column">
<h1>Entertainment</h1>
<ul>
<li><a href="/components/7">Audio Component Piers</a></li>
<li><a href="/components/8">Easy Wire Access System</a></li>
<li><a href="/components/9">Occasional Tables</a></li>
<li><a href="/components/10">TV Consoles</a></li>
</ul>
<h1>Occasional</h1>
<ul>
<li><a href="/components/11">Coffee Tables</a></li>
<li><a href="/components/12">End Tables</a></li>
<li><a href="/components/13">Sofa Tables</a></li>
</ul>
</div>
<div class="column">
<h1>Office</h1>
<ul>
<li><a href="/components/14">Bookcases</a></li>
<li><a href="/components/15">Computer Armoires</a></li>
<li><a href="/components/16">Computer Carts</a></li>
<li><a href="/components/17">Conference Tables</a></li>
<li><a href="/components/18">Computer Credenzas</a></li>
<li><a href="/components/19">Desks</a></li>
<li><a href="/components/20">Executive Desks</a></li>
<li><a href="/components/21">Filing Cabinets</a></li>
<li><a href="/components/22">Hutches</a></li>
<li><a href="/components/23">L-Shaped Desks</a></li>
<li><a href="/components/24">Peninsula Walls</a></li>
<li><a href="/components/25">Writing Tables</a></li>
</ul>
</div>
</div>