1

我是 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 &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>
4

1 回答 1

4

试试看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
于 2013-04-07T06:06:58.067 回答