保华的Rails学习笔记

购物网站代码重构(二)

1、用helper重写订单的created时间

在order的view页面中,出现了<%= order.created_at.to_s(:long) %>这样的、有一点艰涩的代码,我们可以对它进行优化,使它更具有可读性
在app/helpers/account/orders_helper.rb中加入

def render_order_time(order)
    order.created_at.to_s(:long)
end

在view页面中,就可以用render_order_time(order)来代替order.created_at.to_s(:long)了
修改app/views/account/orders/index.html.erb

   <td><%= link_to(order.id,order_path(order.token)) %></td>
-      <td><%= order.created_at.to_s(:long) %></td>
+      <td><%= render_order_time(order) %></td>
 </tr>

2、用partial优化app/views/products/index.html.erb页面

app/views/products/index.html.erb页面中,代码是这样写的

<div class="row">
  <% @products.each do |product| %>
    <div class="col-xs-6 col-md-3">
      <%= link_to product_path(product) do %>
        <% if product.image.present? %>
          <%= image_tag(product.image.thumb.url,class: "thumnial") %>
        <% else %>
          <%= image_tag("http://placehold.it/200x200&text=No Pic",class: "thumbnail") %>
        <% end %>
      <% end %>
      <%= product.title %> ¥ <%= product.price %>
    </div>
  <% end %>
</div>

修改它

<div class="row">
-  <% @products.each do |product| %>
-    <div class="col-xs-6 col-md-3">
-      <%= link_to product_path(product) do %>
-        <% if product.image.present? %>
-          <%= image_tag(product.image.thumb.url,class: "thumnial") %>
-        <% else %>
-          <%= image_tag("http://placehold.it/200x200&text=No Pic",class: "thumbnail") %>
-        <% end %>
-      <% end %>
-      <%= product.title %> ¥ <%= product.price %>
-    </div>
-  <% end %>
+  <%= render :partial => "product_item", :collection => @products, :as => :product %>

其中,

<%= render :partial => "product_item", :collection => @products, :as => :product %>

也可以用

<%= render: "product_item", collection: @products, as: "product" %>

来代替,两种写法,效果一样

同时创建新文件app/views/products/_product_item.html.erb,它的内容如下:

<div class="col-xs-6 col-md-3">
  <%= link_to product_path(product) do %>
    <% if product.image.present? %>
      <%= image_tag(product.image.thumb.url,class: "thumnial") %>
    <% else %>
      <%= image_tag("http://placehold.it/200x200&text=No Pic",class: "thumbnail") %>
    <% end %>
  <% end %>
  <%= product.title %> ¥ <%= product.price %>
</div>

此时我们查看rails s的log,可以看到


product_item已经被加载了

同时,我们要对app/views/admin/products/index.html.erb做同样的partial优化

<tbody>
-    <% @products.each do |product| %>
-      <tr>
-        <td>
-          <%= product.id %>
-        </td>
-        </td>
-        <td>
-          <%= link_to product_path(product) do %>
-            <% if product.image.present? %>
-              <%= image_tag(product.image.thumb.url, class: "thumbnail") %>
-            <% else %>
-              <%= image_tag("http://placehold.it/200x200&text=No Pic", class: "thumbnail") %>
-            <% end %>
-          <% end %>
-        </td>
-      <td>
-        <%= product.title %>
-      </td>
-      <td>
-        <%= product.price %>
-      </td>
-      <td>
-        <%= link_to("Edit",edit_admin_product_path(product)) %>
-      </td>
-      </tr>
-    <% end %>
+    <%= render partial: "product_item", collection: @products, as: "product" %>
   </tbody>

创新文件app/views/admin/products/_product_item.html.erb,它的内容如下:

<tr>
    <td>
      <%= product.id %>
    </td>
    <td>
      <%= link_to product_path(product) do %>
        <% if product.image.present? %>
          <%= image_tag(product.image.thumb.url, class: "thumbnail") %>
        <% else %>
          <%= image_tag("http://placehold.it/200x200&text=No Pic", class: "thumbnail") %>
        <% end %>
      <% end %>
    </td>
  <td>
    <%= product.title %>
  </td>
  <td>
    <%= product.price %>
  </td>
  <td>
    <%= link_to("Edit",edit_admin_product_path(product)) %>
  </td>
  </tr>