Rails3教程系列之九：Rails3入门（8, 完结篇）

solaz3

浏览: 73130 次
性别:
来自: 南京

最近访客更多访客>>

I7eye

ahtest

herb_16

无泪的寂寞

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (9)

社区版块

存档分类

jQuery Rails JavaScript Ajax prototype

通过前面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)
end

添加 views/posts/destroy.js.erb:

$('#post_<%= @post.id %>').hide(); //隐藏删除的记录.

最后的删除评论就留给大家吧 : )

所有的Rails3入门现在正式结束, 在后面的教程中, 我们将重点学习Rails3中的各个模块, 感谢大家收看!

分享到：

Rails3教程系列之八：Rails3入门（7）

2010-12-04 11:47
浏览 7052
评论(5)
分类:编程语言
查看更多

5 楼 dbsGen 2012-10-24

很有用，多谢博主

4 楼 feifan_5223 2012-04-27

不知道你在说什么

3 楼 wtaoli 2011-04-01

楼主能把这个入门的文章做成pdf不？可以下载下来在本地看多谢

2 楼 wtaoli 2011-03-30

博主写的真不错，看了之后豁然开朗

1 楼 wlon 2011-01-11

看完了，有不少帮助，对与rails3 和 rails2 的区分理解明确了。谢谢博主

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论