CODEWITHSUNDEEP
ruby-on-railsforeachhamlhelper
Eric Norcross
Eric Norcross

Reputation: 4306

Rails: DRYer way to create haml layout

I'm new to rails and have been working on this for hours. I have finally gotten it to work but I feel like my solution is a bit hacky and not at all DRY.

I have a layout that requires a new div for every 2 items. Ideally I'd like to abstract this to a helper.

There has to be a better way to do this...

View code:

.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

This produces the correct HTML of:

<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>

Upvotes: 1

Views: 223

Answers (1)

Tom&#225;š Dund&#225;ček
Tom&#225;š Dund&#225;ček

Reputation: 1060

Try each_slice! 

- Category.products.each_slice(2) do |group|
  .column
    - group.each do |product|
      %h1
        =product.title
      %ul
        - product.components.each do |component|
          %li
            = link_to component.title, component

Upvotes: 4

Related Questions