ruby on rails入门教程之post构建九
通过前面8篇文章的学习, 我们已经基本掌握了如何快速开发一个简单的博客应用程序, 本章作为入门的完结篇, 我们将要学习来为博客加上ujs, 让我们的博客加上一点ajax效果.
ujs全称Unobtrusive Javascript, 这也是Rails3的重要特性之一. Rails3的ujs利用了HTML5中 data-*@ 属性的巨大优势, 而摒弃了以前基于Prototype JS的构造器. (在rails1和rails2中, 我们使用ajax可能会利用 xxx.rjs 或者 xxx.js.builder, 在里面可以使用封装prototype的Page对象)
1. 让Rails3使用jQuery
轻量级js框架jquery相信大家一定不会陌生, 本教程中的ujs教程也是基于jquery来写的(当然你也可以使用prototype).
首先, 下载最新的jquery然后放入 public/javascripts 文件夹下面:
$ curl -L http://code.jquery.com/jquery-1.4.3.min.js > public/javascripts/jquery.js
同时我们也需要把原来的prototype ujs的rails.js 改成 jquery-ujs的rails.js:
$ curl -L http://github.com/rails/jquery-ujs/raw/master/src/rails.js > public/javascripts/rails.js
下载后可以看下javascripts文件夹, 里面有application, controls, dragdrop, effects, jquery, prototype 以及 rails 等js文件, 出来jquery以外, 其他都是生产bolg应用时rails加进去的.
现在打开 config/application.rb 文件, 修改下面的配置:
- # JavaScript files you want as :defaults (application.js is always included).
- config.action_view.javascript_expansions[:defaults ] = %w(jquery rails)
上面的代码告诉rails, :default 符号的定义现在改成 jquery和rails啦, 启动我们的博客程序, 查看源代码中的<head>中的<script>是不是这3个js脚本.
2. 给评论加上ujs
当用户发表评论后, 浏览器往往会刷新页面, 那么使用ajax方式提交可以实现局部刷新, 从而避免数据交互开销以及增加客户体验.
现在我们修改 views/comments/_form.erb:
- < %= form_for([@post, @post.comments.build], :remote = > true) do |f| % >
- ...
:remote=>true告诉rails, 该表单将使用xmlhttprequest方式提交数据.
接着, 我们修改 CommentsController下面的create动作:
- class CommentsController < ApplicationController
- before_filter :authenticate , :only => :destroy
- respond_to :html , :js , :xml
- def create
- @post = Post.find(params[ :post_id ])
- @comment = @post .comments.build(params[ :comment ])
- respond_with @comment if @comment .save
- end
- ...
- end
还记得先前教程中的 respond_to 声明吗? 如果评论保存成功, rails将寻找相应的模板, 如果存在 create.html.erb 将渲染html, 如果存在 create.js.erb 当渲染js.
那么现在我们可以在 views/comments/下面创建 create.js.erb 模板了:
- $( '#comments' ).append( "<%= escape_javascript(render @comment) %>" ); // 插入 _comment 局部模板
- $('#comment_body' ).val( "" ); // 清空表单
很熟悉? 是的, 完全就是jquery的写法, 只不过我们使用了一个 escape_javascript 来生成一段无<script>标记的代码.
现在, 我们需要修改下 Posts/ 下面的show.html.erb 模板:
- < h2 > Comments </ h2 >
- < div id = "comments" >
- < %= render @post.comments % >
- </ div >
好了, 现在试试吧.
3. 删除文章和评论
最后我们试着把 删除post以及评论 也加上ujs效果:
posts/index.html.erb:
- < % @posts.each do |post| % >
- < tr id = '<%= "post_#{post.id}" %>' >
- < td > < %= post.name % > </ td >
- < td > < %= post.title % > </ td >
- < td > < %= post.content % > </ td >
- < td > < %= link_to 'Show', post % > </ td >
- < td > < %= link_to 'Edit', edit_post_path(post) % > </ td >
- < td > < %= link_to 'Destroy', post, :confirm = > 'Are you sure?', :method = > :delete, :remote = > true % > </ td >
- </ tr >
- < % end % >
PostsController#destroy:
def destroy
- @post = Post.find(params[ :id ])
- @post .destroy
- respond_with(@post )
添加 views/posts/destroy.js.erb:
- $( '#post_<%= @post.id %>' ).hide(); //隐藏删除的记录.
最后的删除评论就留给大家吧
来自：http://blog.csdn.net/emerald0106/article/details/7078931