Question

我是铁杆的新手，并且已经在这方面工作了好几个小时。我终于得到了它的工作，但我觉得我的解决方案有点hacky而且根本不干。

我有一个布局，每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>

Answer 1

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

Rails：DRYer创建haml布局的方法

1 个答案: