繁体   English   中英

使用partials,如何以DRY方式呈现`striped`表格行?

[英]Using partials, how do I render `striped` table rows in a DRY way?

所以我有一些看起来像这样的视图代码:

<div class="box-content">
    <table class="table table-properties">
        <tbody>             
            <%= render :partial => 'property', collection: @search.listings, as: :listing %>
        </tbody>
    </table>                                
</div>

_property.html.erb ,我有这个:

<tr>
    <td class="span2">
        <%= link_to listing_path(listing), :class => "thumbnail thumb2" do %>
            <%= image_tag "room_1.jpg", :alt => "Lucas" %>
        <% end %>
    </td>
    <td>
        <h2><%= link_to listing.headline, listing_path(listing) %></h2>
        <h5><%= listing.listing_type.name if listing.listing_type "#{listing.neighborhood.name.capitalize}" %></h5>
        <h5>Maintenance <%= number_to_currency(listing.maintenance) %></h5>
    </td>
    <td class="span1">
        <h2 class="price"><%= number_to_currency(listing.price)%></h2>
        <h5><%= "#{listing.num_bedrooms} bed, #{listing.num_bathrooms} bath" %></h5>
    </td>
</tr>

基本上,我想准确地生成上面的代码,对于每一行,唯一的区别是我希望每个第二行(即所有偶数行)都具有class=striped ..ie <tr class=striped>

关于如何以干燥的方式做到这一点的想法?

你尝试过使用cyclecurrent_cycle吗?

http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html#method-i-cycle

<tr class="<%= cycle('odd', 'even') -%>">
  <!-- etc -->
</tr>

这会使您的班级与oddeven交替,恕我直言也应该在渲染集合时起作用。 如果你需要多次实际循环的值,你可以用current_cycle得到它(因为多次调用cycle会扰乱你的循环,除非你想要那样)。

使用:nth-child() css选择器不是更好吗? http://www.w3schools.com/cssref/sel_nth-child.asp

你可以尝试这样的事情:

 <tr class="<%=cycle("odd", "even") %>">
    <td class="span2">
        <%= link_to listing_path(listing), :class => "thumbnail thumb2" do %>
            <%= image_tag "room_1.jpg", :alt => "Lucas" %>
        <% end %>
    </td>
    <td>
        <h2><%= link_to listing.headline, listing_path(listing) %></h2>
        <h5><%= listing.listing_type.name if listing.listing_type "#{listing.neighborhood.name.capitalize}" %></h5>
        <h5>Maintenance <%= number_to_currency(listing.maintenance) %></h5>
    </td>
    <td class="span1">
        <h2 class="price"><%= number_to_currency(listing.price)%></h2>
        <h5><%= "#{listing.num_bedrooms} bed, #{listing.num_bathrooms} bath" %></h5>
    </td>
 </tr>

用jquery做:

$(document).ready(function(){
   $("table.table-properties > tbody > tr:odd").addClass("odd");
   $("table.table-properties > tbody > tr:not(.odd)").addClass("even");  
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM