ruby-on-rails - Rails: Haml レイアウトを作成する DRYer な方法

Question

私はレールに不慣れで、これに何時間も取り組んできました。ようやく機能するようになりましたが、私のソリューションは少しハックで、DRY ではないように感じます。

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 &amp; 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>