`
tiny.strimp
  • 浏览: 30368 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

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文件显示购物车信息时,页面和数据之间的关系是:
引用
add_to_cart.html.erb
   +-- Cart
        +-- CartItem

同样的,如果我们用store.html.erb中的Sidebar来显示购物车中的信息时,页面和数据间的关系是:
引用
store.html.erb
   +-- Cart
        +-- CartItem

那么,我们需要为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的约定,必须按照下面格式命名:
引用
_partial-name.html.erb


好了,现在我们来实现我们前面描述的功能吧。
根据上面页面和对象的依赖关系,首先,我们要在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>&times;<%= 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;
}


这样我们的目标就达成了。现在可以打开服务,尝试以下我们修改后的效果了。
下面是我做好的页面图,给大家看看效果:


注:这篇笔记加入了很多我自己的分析部分。由于是第一次使用这样的技术,理解还很浅薄,如果哪里有什么不正确的地方,还希望知道的朋友能给指正出来。谢谢!
  • 大小: 215.8 KB
分享到:
评论

相关推荐

    Agile Web Development with Rails, 2nd Edition

    Agile Web Development with Rails, 2nd Edition &lt;br&gt;有两份PDF文件,大小分别是7.39MB和6.55MB &lt;br&gt;作者: Dave Thomas , David Heinemeier Hansson , Leon Breedt , Mike Clark , James Duncan Davidson ,...

    Agile Web Development with Rails 3nd Edition Beta.pdf

    ### 敏捷Web开发与Rails 3:关键知识点解析 #### 一、Rails版本与兼容性 本书《敏捷Web开发与Rails》第三版是基于Rails 2编写的。截至本书印刷时,当前可用的Rails Gem版本为2.1。书中所包含的所有代码均已在该...

    Agile Web Development with Rails 3nd Edition Beta

    文件列表中的《Agile Web Development with Rails 3nd Edition Beta.pdf》很可能是这本书的电子版,读者可以通过阅读此PDF文件获取完整的学习资料,包括详细的章节讲解、示例代码和练习题,以便在实践中不断巩固和...

    Agile+Web+Development+with+Rails中文版.pdf

    《Agile Web Development with Rails》是一本经典的Rails开发指南,中文版的出版使得更多的中国开发者能够深入理解并应用敏捷开发方法与Ruby on Rails框架。这本书是Rails开发者的必备参考资料,它详细介绍了如何...

    Agile Web Development with Rails 4

    Ruby on Rails helps you produce high-quality, beautiful-looking web applications quickly. You concentrate on creating the application, and Rails takes care of the details., Tens of thousands of ...

    Agile Web Development with Rails 3nd Edition .pdf

    Rails敏捷开发第三版,很不错的rails入门书,对初学rails的人很有用

    Agile Web Development with Rails,Fourth Edition 第四版

    《敏捷Web开发与Rails》第四版是一本专为软件开发者设计的权威指南,全面涵盖了使用Ruby on Rails框架进行敏捷Web应用开发的知识。Rails 3是该版本的重点,它引入了许多新特性和改进,使得开发过程更为高效且灵活。...

    Agile Web Development with Rails-Second Edition-Beta一书例子

    《Agile Web Development with Rails-Second Edition-Beta》是一本专注于使用Ruby on Rails进行敏捷Web开发的书籍。这本书的第二版beta版提供了关于如何利用Rails框架高效构建动态、响应式网站的深入指导。作者们...

    Agile Web Development with Rails

    书中的"Pragmatic.Bookshelf.Agile.Web.Development.with.Rails.2nd.Edition.Dec.2006.eBook-BBL"可能是该书籍的电子版文件,它包含了全书的章节和内容。读者可以通过这个电子版深入学习Rails开发的各种技巧和最佳...

    Agile Web Development with Rails 4th edition(敏捷Web开发与Rails:程序指南 第四版)

    《敏捷Web开发与Rails:程序指南 第四版》是一本深度探讨使用Ruby on Rails框架进行敏捷Web应用开发的专业书籍。本书旨在帮助开发者充分利用Rails 4的特性,提高开发效率,实现快速迭代和高质量的代码编写。 Rails是...

    Agile Web Development with Rails 1-14节_ppt(老师发的修正版)

    Agile Web Development with Rails 1-14节_ppt(老师发的修正版)

    Agile Web Development with Rails, Third Edition 2009 (PDF + 代码)

    Agile Web Development with Rails, Third Edition by Sam Ruby, Dave Thomas, David Heinemeier Hansson Rails just keeps on changing. Rails 2, released in 2008, brings hundreds of improvements, including...

    Agile Web Development with Rails 2nd Edition源码

    《敏捷Web开发与Rails 2nd Edition》源码解析 在Web开发领域,Rails框架以其高效、灵活和生产力提升的特点,成为了许多开发者首选的工具。《敏捷Web开发与Rails 2nd Edition》这本书深入浅出地介绍了如何使用Ruby ...

    Agile Web Development with Rails (PDF)

    《敏捷Web开发与Rails》是一本深度探讨如何利用Ruby on Rails框架进行敏捷Web开发的指导书籍,由Dave Thomas、David Heinemeier Hansson等多位在Rails社区有着深厚贡献的作者共同编写。本书不仅覆盖了Rails的基本...

Global site tag (gtag.js) - Google Analytics