Rails3入门锦集((8) 设置支持jQuery,rails3.1不用配置
通过前面7篇文章的学习, 我们已经基本掌握了如何快速开发一个简单的博客应用程序, 本章作为入门的完结篇, 我们将要学习来为博客加上ujs, 让我们的博客加上一点ajax效果.
$ 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动作:
?
还记得先前教程中的 respond_to 声明吗? 如果评论保存成功, rails将寻找相应的模板, 如果存在 create.html.erb 将渲染html, 如果存在 create.js.erb 当渲染js.
?
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?
那么现在我们可以在 views/comments/下面创建 create.js.erb 模板了:
?
$('#comments').append("<%= escape_javascript(render @comment) %>"); // 插入 _comment 局部模板$('#comment_body').val(""); // 清空表单?<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) @post = Post.find(params[:id]) @post.destroy respond_with(@post)end?
添加 views/posts/destroy.js.erb:
$('#post_<%= @post.id %>').hide(); //隐藏删除的记录.?
最后的删除评论就留给大家吧 : )
?
所有的Rails3入门现在正式结束, 在后面的教程中, 我们将重点学习Rails3中的各个模块, 感谢大家收看!
?
?
?
转自: http://onia.iteye.com/blog/833268
1 楼 阿浊I 2011-11-30 你好，rails3.1好像这样不行呢？