Agile Web Development with Rails 3nd Edition学习笔记-使用Ajax将购物车放入Sidebar

之前，当用户点击了“Add to Cart“按钮之后，页面会跳转到add_to_cart页面。用户想继续选购产品需要点击浏览器的回退按钮才能再回到产品列表页面。另外，用户在查看产品列表页面是如果想看看自己已经选了些什么东西，以及需要花多少钱时，在不添加新的产品到购物车的情况下，其实是做不到的。这个用户带来了很大的不便。
所以，我们想改进我们的网站。把购物车的列表摆放到页面的Sidebar上。这样用户不论在什么时候都可以查看自己已经选了些什么，以及要花多少钱。
那么，我们开始吧。
要做到这些，我们需要一些Ajax的技术。Rails提供了一个叫partial的模板来实现它。
首先，我们来分析以下：
1、我们要在Sidebar上显示购物车的信息，那么我们需要在depot/app/views/layouts/store.html.erb文件中添加相应的代码。而数据则是从cart对象中取得的。
2、当我们点击“Add to Cart”按钮时，触发add_to_cart方法，把一个CartItem对象添加到Cart对象中，并要显示add_to_cart.html.erb文件中的内容。
也就是说，在使用add_to_cart.html.erb文件显示购物车信息时，页面和数据之间的关系是：
[quote]add_to_cart.html.erb
+-- Cart
+-- CartItem[/quote]
同样的，如果我们用store.html.erb中的Sidebar来显示购物车中的信息时，页面和数据间的关系是：
[quote]store.html.erb
+-- Cart
+-- CartItem[/quote]
那么，我们需要为Cart和CartItem创建partial，并在store.html.erb中使用Cart的partial，而在Cart的partial中使用CartItem的partial。
好的，依赖关系搞清楚了之后。我们先来说一下partial的一些东西。
首先，我的理解是，partial实际上和C#中的partial类很相似。C#中的partial类实际上是在多个文件中定义本应在一个文件中定义的类。编译时这些文件中的定义将被合并到这个类的定义中。
那么Rails中的partial实际上是在多个文件中定义一个页面，而实际使用中，这些信息将被合并。
在使用一个partial时，使用类似下面的代码：
当将被引用的partial实际使用一个对象实例时

<%= render(:partial => "partial-name" , :object => @obj-name) %>

当将被引用的partial实际使用的是一个对象的集合时

<%= render(:partial => "partial-name" , :collection => collection-obj) %>

这里，partial-name一般使用和对应对象相同的名称，但也可以不同。但是要注意的是，传给下一级partial时，包含数据的对象的名称将和partial-name相同。
还有一点，与这个partial-name对应的partial文件的文件名，根据Rails的约定，必须按照下面格式命名：
[quote]_partial-name.html.erb[/quote]

好了，现在我们来实现我们前面描述的功能吧。
根据上面页面和对象的依赖关系，首先，我们要在store.html.erb加入对Cart的partial引用：
在该文件id为“side”的div的开始部分加入如下代码：

<div id="cart">
  <%= render(:partial => "cart" , :object => @cart) %>
</div>

这里，我们定义了一个叫“cart”的partial。根据上面提到的命名规则，对应的partial文件名为：_cart.html.erb。
接下来，我们来定义这个Cart的partial。

<div class="cart-title">Your Cart</div>
<table>
  <%= render(:partial => "cart_item" , :collection => cart.items) %>
  <tr class="total-line">
    <td colspan="2">Total</td>
    <td class="total-cell"><%= number_to_currency(cart.total_price) %></td>
  </tr>
</table>
<%= button_to "Empty cart" , :action => :empty_cart %>

在这个文件中，render所在的行其实替换掉了原先的add_to_cart.html.erb文件中循环显示每个CartItem的部分，其它部分没有改变。我的理解是，“:collection”实际上会为后面指定的cart.items中的每一个对象调用由“:partial”指定的partial文件定义的处理，从而产生和之前循环显示一样的效果。
那么，我们接下来定义_cart_item.html.erb

<tr>
  <td><%=h cart_item.title %></td>
  <td>×<%= cart_item.quantity %></td>
  <td class="item-price"><%= number_to_currency(cart_item.price) %></td>
</tr>

这个可以很明显的看出，这个partial中的定义实际上是原先add_to_cart.html.erb中被循环使用的部分。
从这两个partial我们可以看出，他们实际上是把原先add_to_cart.html.erb中定义的内容拆分到了两个文件中定义。而这两个文件通过Rails提供的机制在调用是被整合到了一起。

这样，最主要的部分我们就做完了。为了不让用户在点击“Add to Cart”按钮时再显示add_to_cart页面，我们需要对store_controller.rb文件做一些修改。
首先，我们要让redirect_to_index方法可以无参调用，以便我们在不需要消息的时候跳转到index页面。修改后的代码如下：

def redirect_to_index(msg = nil)   <== Changed
  flash[:notice] = msg if msg           <== Changed
  redirect_to :action => 'index'
end

接下来，我们不希望add_to_cart方法在调用完之后显示add_to_cart页面，因此，我们在添加完产品之后让页面直接跳转回index页面。修改后的代码如下：

def add_to_cart
  product = Product.find(params[:id])
  @cart = find_cart
  @cart.add_product(product)
  redirect_to_index                  <== New
rescue ActiveRecord::RecordNotFound
  logger.error("Attempt to access invalid product #{params[:id]}")
  redirect_to_index("Invalid product")
end

好了，功能实现部分就好了。其实这个时候add_to_cart.html.erb文件就没有用了。因为add_to_cart方法在完成时已经指向index页面了。

为了让我们的页面看起来美观些，在depot.css文件中加入如下式样信息：

#ca rt, #ca rt table {
  font-size: smaller;
  color:       white;
}
#ca rt table {     
  border-top:    1px dotted #595 ;
  border-bottom: 1px dotted #595 ;
  margin-bottom: 10px;
}

这样我们的目标就达成了。现在可以打开服务，尝试以下我们修改后的效果了。
下面是我做好的页面图，给大家看看效果：
[img]http://dl.iteye.com/upload/attachment/240543/fd9fde5a-d9a3-314f-ab72-1ca168eeab80.jpg[/img]

[color=orange]注：这篇笔记加入了很多我自己的分析部分。由于是第一次使用这样的技术，理解还很浅薄，如果哪里有什么不正确的地方，还希望知道的朋友能给指正出来。谢谢！[/color]