【ror学习笔记6】AJAX

一。把JavaScript库发送到用户的浏览器

app\views\layouts\store.rhtml

< head >
< title > Pragprog Books Online Store </ title >
<% = stylesheet_link_tag ' depot' ,:media=>"all"%>
< % = javascript_include_tag :defaults %>
</ head >

 

二。把button_to 方法修改成form_remote_tag方法

1.注：此处书本代码写错了

app\views\store\index.rhtml

< h1 > Your Pragmatic Catalog </ h1 >
<% for product in @products - %>
< div class ="entry" >
< img src ="<%=product.image_url %>" />
< h3 > <% = h(product.title) %> </ h3 >
<% = product.description %>
< div class ="price-line" >
< div class ="price" > <% = number_to_currency(product.price) %> </ div >
<% form_remote_tag :url => {:action => :add_to_cart,:id => product} do %>
<% = submit_tag " Add to Cart " %>
<% end %>
</ div >
</ div >
<% end %>

 

 

 

2.修改add_to_cart方法，使只在JavaScript被禁用的时候才转移到主页

app\controllers\store_controller.rb

def add_to_cart
begin
@product = Product . find(params[ : id])
rescue ActiveRecord :: RecordNotFound
logger . error( " Attempt to access invalid product #{params[:id]} " )
redirect_to_index( " Invalid product " )
else
@cart = find_cart
@current_item = @cart . add_product(@product)
redirect_to_index unless request .xhr?
end
end

 

3.创建app\views\store\add_to_cart.rjs（记住要删除add_to_cart.rhtml）

page . replace_html( " cart " ,: partial => " cart " , : object => @cart)

 

三。高亮

1.把current_item赋值给控制器的实例变量@current_item

（1）修改app\models\cart.rb，使返回current_item

def add_product(product)
current_item = @items . find{ | item | item . product == product}
if current_item
current_item . increment_quantity
else
current_item = CartItem . new (product)
@items << current_item
end
current_item
end

（2）修改store_controller.rb，把从add_product获得的current_item赋值给实例变量@current_item

def add_to_cart
begin
@product = Product . find(params[ : id])
rescue ActiveRecord :: RecordNotFound
logger . error( " Attempt to access invalid product #{params[:id]} " )
redirect_to_index( " Invalid product " )
else
@cart = find_cart
@current_item = @cart. add_product(@product)
redirect_to_index unless request . xhr ?
end
end

2.\views\store\_cart_item.rhtml局部模板中给current_item做标记

代码

<% if cart_item == @current_item %>
<tr id = "current_item">
<% else %>
<tr>
<% end %>
< td > <% = cart_item.quantity %> &times; </ td >
< td > <% = h(cart_item.title) %> </ td >
< td class ="item-price" > <% = number_to_currency(cart_item.price) %> </ td >
</ tr >

3.利用current_item标记，在add_to_cart.rjs模板中调用visual_effect方法

page . replace_html( " cart " ,: partial => " cart " , : object => @cart)

page[ : current_item] . visual_effect : highlight ,
: startcolor => " #88ff88 " ,
: endcolor => " #114411 "

 

四。隐藏空购物车

1.显示刚创建的购物车

store\add_to_cart.rjs

page . replace_html( " cart " ,: partial => " cart " , : object => @cart)

page[ :cart].visual_effect :blind_down if @cart.total_items ==1

page[ : current_item] . visual_effect : highlight ,
: startcolor => " #88ff88 " ,
: endcolor => " #114411 "

models\cart.rb添加total_items方法

def total_items
@items . sum { | item | item . quantity}
end

 

2.辅助方法修改购物车CSS的id

（1）在helpers\store_helper.rb创建辅助方法

module StoreHelper
def hidden_div_if(condition , attributes = {} )
if condition
attributes[ " style " ] = " display :none "
end
attrs = tag_options(attributes . stringify_keys)
" <div #{attrs}> "
end

end

（2）在布局模板中调用辅助方法

<% = hidden_div_if(@cart.items.empty?,:id => " cart " ) %>
<% = render(:partial => " cart " , : object => @cart) %>
</ div >

 

3.修改控制器，去除清空提示

store_controller.rb

def empty_cart
session[:cart] = nil
redirect_to_index
end

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/sherlcok/archive/2010/11/22/1884040.html