这篇只有很少的一点内容,只是说说如何格式化价格数据成为货币的格式,以及在价格后面添加一个“添加到购物车”的按钮。
1. 格式化价格数据:
一般,我们在格式化数据的时候,首先想到的总是sprintf之类的具有格式化字串能力的方法。例如,当我们要格式化12.34为$12.34,而格式化13成$13.00时可以这样写:
但当我们想做到全球化时,这个方法就不是那么好用了。因为每个国家表示货币的字符都不尽一致。对于这个问题,Rails为我们提供了一个更好的途径来完成这件事,那就是Helper方法number_to_currency。
让我们修改app/views/store/index.html.erb文件中的第9行来看看实际的效果。
修改前:
修改后:
好,现在刷新一下页面,就可以看到格式化后的价格了。
2. 添加一个“添加到购物车”按钮:
书中在这里讲了2个链接方法的一些区别,记述如下:
a、link_to:
这个Helper会生成一个<a href=...>的tag。当你点击这个链接是,浏览器会生成一个HTTP GET请求给服务器。HTTP GET请求不应该改变服务器端的任何状态。而只应该用来取得信息。
b、button_to:
这个Helper会生成一个只包含一个按钮的Form。当用户点击它的时候,其产生一个HTTP POST请求给服务器。Post请求仅仅是向服务器发送了一个要做某事的通知。
从这两中链接方法的区别我们可以看到,我们这里用来实现“添加到购物车”按钮最适合的就是button_to了。所以,我们在app/views/store/index.html.erb文件的第9行之后添加如下代码:
刷新我们的页面,我们会发现这个按钮被添加到了价格的下面。如过我们希望这个按钮跟在价格的后面该怎么做呢?我们可以通过CSS来完成这件事。
在public/stylesheets/depot.css中加入如下代码:
这时再刷新页面,按钮就跑到价格的后面去了。
下图就是今天修改后的效果了。那个按钮的长相其实还不错啦!哈哈! :D
[img]http://dl.iteye.com/upload/attachment/236887/3c78a09d-e49f-307f-87ad-90ac128753b0.jpg[/img]
1. 格式化价格数据:
一般,我们在格式化数据的时候,首先想到的总是sprintf之类的具有格式化字串能力的方法。例如,当我们要格式化12.34为$12.34,而格式化13成$13.00时可以这样写:
<%= sprintf("$%0.02f" , product.price) %>
但当我们想做到全球化时,这个方法就不是那么好用了。因为每个国家表示货币的字符都不尽一致。对于这个问题,Rails为我们提供了一个更好的途径来完成这件事,那就是Helper方法number_to_currency。
让我们修改app/views/store/index.html.erb文件中的第9行来看看实际的效果。
修改前:
<span class="price" ><%= product.price %></span>
修改后:
<span class="price" ><%= number_to_currency(product.price) %></span>
好,现在刷新一下页面,就可以看到格式化后的价格了。
2. 添加一个“添加到购物车”按钮:
书中在这里讲了2个链接方法的一些区别,记述如下:
a、link_to:
这个Helper会生成一个<a href=...>的tag。当你点击这个链接是,浏览器会生成一个HTTP GET请求给服务器。HTTP GET请求不应该改变服务器端的任何状态。而只应该用来取得信息。
b、button_to:
这个Helper会生成一个只包含一个按钮的Form。当用户点击它的时候,其产生一个HTTP POST请求给服务器。Post请求仅仅是向服务器发送了一个要做某事的通知。
从这两中链接方法的区别我们可以看到,我们这里用来实现“添加到购物车”按钮最适合的就是button_to了。所以,我们在app/views/store/index.html.erb文件的第9行之后添加如下代码:
<%= button_to "Add to Cart" %>
刷新我们的页面,我们会发现这个按钮被添加到了价格的下面。如过我们希望这个按钮跟在价格的后面该怎么做呢?我们可以通过CSS来完成这件事。
在public/stylesheets/depot.css中加入如下代码:
#store .entry form, #store .entry form div {
display: inline;
}
这时再刷新页面,按钮就跑到价格的后面去了。
下图就是今天修改后的效果了。那个按钮的长相其实还不错啦!哈哈! :D
[img]http://dl.iteye.com/upload/attachment/236887/3c78a09d-e49f-307f-87ad-90ac128753b0.jpg[/img]