- 浏览: 29434 次
- 性别:
- 来自: 苏州
最新评论
Agile Web Development with Rails 3nd Edition学习笔记-使用Ajax将购物车放入Sidebar
- 博客分类:
- Ruby and Rails
之前,当用户点击了“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文件显示购物车信息时,页面和数据之间的关系是:
同样的,如果我们用store.html.erb中的Sidebar来显示购物车中的信息时,页面和数据间的关系是:
那么,我们需要为Cart和CartItem创建partial,并在store.html.erb中使用Cart的partial,而在Cart的partial中使用CartItem的partial。
好的,依赖关系搞清楚了之后。我们先来说一下partial的一些东西。
首先,我的理解是,partial实际上和C#中的partial类很相似。C#中的partial类实际上是在多个文件中定义本应在一个文件中定义的类。编译时这些文件中的定义将被合并到这个类的定义中。
那么Rails中的partial实际上是在多个文件中定义一个页面,而实际使用中,这些信息将被合并。
在使用一个partial时,使用类似下面的代码:
当将被引用的partial实际使用一个对象实例时
当将被引用的partial实际使用的是一个对象的集合时
这里,partial-name一般使用和对应对象相同的名称,但也可以不同。但是要注意的是,传给下一级partial时,包含数据的对象的名称将和partial-name相同。
还有一点,与这个partial-name对应的partial文件的文件名,根据Rails的约定,必须按照下面格式命名:
好了,现在我们来实现我们前面描述的功能吧。
根据上面页面和对象的依赖关系,首先,我们要在store.html.erb加入对Cart的partial引用:
在该文件id为“side”的div的开始部分加入如下代码:
这里,我们定义了一个叫“cart”的partial。根据上面提到的命名规则,对应的partial文件名为:_cart.html.erb。
接下来,我们来定义这个Cart的partial。
在这个文件中,render所在的行其实替换掉了原先的add_to_cart.html.erb文件中循环显示每个CartItem的部分,其它部分没有改变。我的理解是,“:collection”实际上会为后面指定的cart.items中的每一个对象调用由“:partial”指定的partial文件定义的处理,从而产生和之前循环显示一样的效果。
那么,我们接下来定义_cart_item.html.erb
这个可以很明显的看出,这个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页面。修改后的代码如下:
接下来,我们不希望add_to_cart方法在调用完之后显示add_to_cart页面,因此,我们在添加完产品之后让页面直接跳转回index页面。修改后的代码如下:
好了,功能实现部分就好了。其实这个时候add_to_cart.html.erb文件就没有用了。因为add_to_cart方法在完成时已经指向index页面了。
为了让我们的页面看起来美观些,在depot.css文件中加入如下式样信息:
这样我们的目标就达成了。现在可以打开服务,尝试以下我们修改后的效果了。
下面是我做好的页面图,给大家看看效果:
注:这篇笔记加入了很多我自己的分析部分。由于是第一次使用这样的技术,理解还很浅薄,如果哪里有什么不正确的地方,还希望知道的朋友能给指正出来。谢谢!
所以,我们想改进我们的网站。把购物车的列表摆放到页面的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
+-- Cart
+-- CartItem
同样的,如果我们用store.html.erb中的Sidebar来显示购物车中的信息时,页面和数据间的关系是:
引用
store.html.erb
+-- Cart
+-- CartItem
+-- 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>×<%= 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; }
这样我们的目标就达成了。现在可以打开服务,尝试以下我们修改后的效果了。
下面是我做好的页面图,给大家看看效果:
注:这篇笔记加入了很多我自己的分析部分。由于是第一次使用这样的技术,理解还很浅薄,如果哪里有什么不正确的地方,还希望知道的朋友能给指正出来。谢谢!
发表评论
-
Agile Web Development with Rails 3nd Edition学习笔记-隐藏空的购物车
2010-04-29 23:19 1004到现在位置,我们已经完成了产品列表和购物车功能。虽然看起来已经 ... -
Agile Web Development with Rails 3nd Edition学习笔记-高亮显示改变
2010-04-28 22:24 832当客户点击了“Add to Cart“按钮之后,购物车的数据改 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建一个基于Ajax的购物车
2010-04-27 22:59 902上篇笔记中,我们通过partial把购物车信息放到了index ... -
Agile Web Development with Rails 3nd Edition学习笔记-完成购物车
2010-04-26 22:41 829这一篇,我们来完成我们的购物车的制作吧。 首先,为了客户能够很 ... -
Agile Web Development with Rails 3nd Edition学习笔记-错误处理
2010-04-26 22:07 797这一部分其实东西很少,这里不做过多的描述,仅仅是记录下来,以便 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建更智能的购物车
2010-04-25 17:05 772上篇笔记我们已经让我们的网站能够保存客户选购的产品了,但是,似 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建购物车
2010-04-23 22:06 858上篇笔记中,我们为保 ... -
Agile Web Development with Rails 3nd Edition学习笔记-把Sessions放进数据库
2010-04-21 22:21 989depot在线商店需要一个能保存用户选购的各种各样的商品的地方 ... -
Agile Web Development with Rails 3nd Edition学习笔记-格式化价格和添加购物按钮
2010-04-19 22:42 1007这篇只有很少的一点内 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建页面布局模板
2010-04-19 01:32 972典型的网站一般都具有 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建产品目录列表
2010-04-18 19:48 761按照书上的引导,我们 ... -
Agile Web Development with Rails 3nd Edition学习笔记-美化我们的程序
2010-04-18 18:37 1001我们的程序现在显示出来的画面还是那么的原始和难看,接下来我们要 ... -
Agile Web Development with Rails 3nd Edition学习笔记-为数据增加校验处理
2010-04-18 00:23 953数据的校验是在model ... -
Agile Web Development with Rails 3nd Edition学习笔记-向数据库表追加字段
2010-04-18 00:07 897我们可以使用migration工具在存在的数据库表中追加字 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建Depot工程
2010-04-17 21:21 897开始学习ROR了,由于在开始跟着书做这个Depot工程 ...
相关推荐
Agile Web Development with Rails 3nd Edition beta
Agile Web Development with Rails 3nd Edition Beta
Agile Web Development with Rails, 2nd Edition <br>有两份PDF文件,大小分别是7.39MB和6.55MB <br>作者: Dave Thomas , David Heinemeier Hansson , Leon Breedt , Mike Clark , James Duncan Davidson ,...
Agile Web Development with Rails 5 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书...
Pragmatic - Agile Web Development with Rails 2ndPragmatic - Agile Web Development with Rails 2ndPragmatic - Agile Web Development with Rails 2ndPragmatic - Agile Web Development with Rails 2...
Agile Web Development with Rails 2nd Edition
Agile Web Development with Rails 2nd Edition源码
Agile Web Development with Rails
Agile Web Development with Rails (PDF)
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 ...
Rails敏捷开发第三版,很不错的rails入门书,对初学rails的人很有用
没什么好介绍的beta版,pdf 第四版,包括Rails 3的内容。
Agile Web Development with Rails 1-14节_ppt(老师发的修正版)
Agile Web Development with Rails (4th edition).pdf
Agile Web Development with Rails.
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 4th edition正式版的对应源代码 就是一些Rails3的项目程序代码