`

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 文件, 修改下面的配置:

  1. # JavaScript files you want as :defaults (application.js is always included).   
  2.     config.action_view.javascript_expansions[:defaults ] = %w(jquery rails)  

上面的代码告诉rails, :default 符号的定义现在改成 jquery和rails啦, 启动我们的博客程序, 查看源代码中的<head>中的<script>是不是这3个js脚本.

2. 给评论加上ujs

当用户发表评论后, 浏览器往往会刷新页面, 那么使用ajax方式提交可以实现局部刷新, 从而避免数据交互开销以及增加客户体验.

现在我们修改 views/comments/_form.erb:

  1. < %= form_for([@post, @post.comments.build],  :remote = > true) do |f| % >   
  2. ...  

:remote=>true告诉rails, 该表单将使用xmlhttprequest方式提交数据.

接着, 我们修改 CommentsController下面的create动作:

  1. class  CommentsController < ApplicationController  
  2.   before_filter :authenticate :only  =>  :destroy   
  3.   respond_to :html :js :xml   
  4.     
  5.   def  create  
  6.     @post  = Post.find(params[ :post_id ])  
  7.     @comment  =  @post .comments.build(params[ :comment ])  
  8.     respond_with @comment   if   @comment .save  
  9.   end   
  10.   
  11.   ...  
  12. end   

还记得先前教程中的 respond_to 声明吗? 如果评论保存成功, rails将寻找相应的模板, 如果存在 create.html.erb 将渲染html, 如果存在 create.js.erb 当渲染js.

那么现在我们可以在 views/comments/下面创建 create.js.erb 模板了:

  1. $( '#comments' ).append( "<%= escape_javascript(render @comment) %>" );  // 插入 _comment 局部模板   
  2. $('#comment_body' ).val( "" );  // 清空表单   

很熟悉? 是的, 完全就是jquery的写法, 只不过我们使用了一个 escape_javascript 来生成一段无<script>标记的代码.

现在, 我们需要修改下 Posts/ 下面的show.html.erb 模板:

  1. < h2 > Comments </ h2 >   
  2. < div   id = "comments" >   
  3.     < %= render @post.comments % >   
  4. </ div >   

好了, 现在试试吧.

3. 删除文章和评论

最后我们试着把 删除post以及评论 也加上ujs效果:

posts/index.html.erb:

  1. < % @posts.each do |post| % >   
  2.   < tr   id = '<%= "post_#{post.id}" %>' >   
  3.     < td > < %= post.name % > </ td >   
  4.     < td > < %= post.title % > </ td >   
  5.     < td > < %= post.content % > </ td >   
  6.     < td > < %= link_to 'Show', post % > </ td >   
  7.     < td > < %= link_to 'Edit', edit_post_path(post) % > </ td >   
  8.     < td > < %= link_to 'Destroy', post,  :confirm  = >  'Are you sure?',  :method  = >  :delete,  :remote  = >  true % > </ td >   
  9.   </ tr >   
  10. < % end % >   

PostsController#destroy:

      def destroy

  1. @post  = Post.find(params[ :id ])  
  2. @post .destroy  
  3. respond_with(@post )  

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

 

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

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

 

来自:http://blog.csdn.net/emerald0106/article/details/7078931

分享到:
评论

相关推荐

    Ruby on Rails入门例子

    在"Ruby on Rails入门例子"中,我们可能会遇到以下关键概念: - **路由(Routes)**:Rails的路由系统将URL映射到特定的控制器动作,定义了应用的导航结构。在`config/routes.rb`文件中配置路由规则。 - **生成器...

    ruby_on_rails 源代码上

    Ruby on Rails拥有庞大的开发者社区,提供了丰富的教程、插件和库。Stack Overflow、GitHub、RailsGuides和RailsCasts等资源对初学者和高级开发者都非常有帮助。 以上只是Ruby on Rails的部分基础知识,实际开发中...

    基于Ruby On Rails的在线购书系统

    《基于Ruby On Rails的在线购书系统》是一个深入探讨如何利用Ruby on Rails框架构建电子商务平台的项目。Ruby on Rails(RoR)是一个开源的Web应用框架,它遵循MVC(模型-视图-控制器)架构模式,以Ruby编程语言为...

    Ruby on rails blog (博客程序)

    Ruby on Rails 是一款基于Ruby语言的开源Web应用框架,它遵循MVC(Model-View-Controller)架构模式,使得开发者可以高效地构建功能丰富的Web应用程序。在这个“Ruby on Rails博客程序”中,我们将深入探讨如何在...

    Ruby on Rails轻松使用

    Ruby on Rails,简称RoR,是一款基于Ruby编程语言的开源Web开发框架,它遵循MVC(Model-View-Controller)架构模式,旨在提高开发效率,同时保持代码的简洁和可读性。RoR的核心理念是“Don't Repeat Yourself”(DRY)...

    ruby on rails 2.1 what is new (CN)

    ### Ruby on Rails 2.1 新特性详解...以上就是Ruby on Rails 2.1版本的一些主要新特性和改进之处。这些更新不仅提升了开发效率,还增强了应用的功能性和稳定性,对于正在使用Rails进行开发的团队来说是非常值得升级的。

    ruby on rails blog(博客)制作

    通过这个Ruby on Rails博客制作的例子,你不仅学会了如何构建一个基本的Web应用,还对Rails的MVC架构、数据库操作、路由设计、表单处理、测试和部署有了深入的理解。这是一个很好的起点,随着你对Rails的深入学习,...

    ruby on rails API

    Ruby on Rails(简称Rails)是一个基于Ruby语言的开源Web应用程序框架,它遵循MVC(Model-View-Controller)架构模式,极大地简化了Web应用开发。API(Application Programming Interface)是Rails提供的一种允许...

    基于ruby on rails 的简单blog

    这个简单的blog项目是初学者了解Rails的好起点,通过实践,可以掌握Rails的基本用法,进一步深入学习数据库操作、模板引擎、路由、控制器以及测试等方面的知识,为成为Ruby on Rails开发大师打下坚实基础。

    lina, An amazing RESTful API provider based on Ruby on Rails( Not maintained ).zip

    “lina, An amazing RESTful API provider based on Ruby on Rails( Not maintained ).zip” 这个标题提到了一个名为“lina”的项目,它是一个基于Ruby on Rails构建的RESTful API服务提供商。RESTful API是Web服务...

    ruby on rails 实例1

    Ruby on Rails,简称RoR,是一款基于Ruby语言的开源Web应用程序框架,它遵循MVC(Model-View-Controller)架构模式,旨在使Web开发过程更加高效、简洁。RoR强调“DRY”(Don't Repeat Yourself)原则和“Convention ...

    使用Ruby on Rails快速开发web应用的教程实例

    Ruby on Rails 是一个使用Ruby语言编写的开源Web应用框架,其设计宗旨是使得开发Web应用更为快速和简洁。它基于著名的模型-视图-控制器(MVC)架构模式,旨在以更少的代码实现更多功能,提高开发效率。Ruby on Rails...

    ruby 1.8.7 rails 2.3.4

    Ruby 是一种面向对象的、动态类型的编程语言,而 Rails 是一个基于 MVC(模型-视图-控制器)架构的 Web 开发框架,它极大地简化了 Web 应用程序的构建过程。 在 Ruby 1.8.7 版本中,一些关键特性包括: 1. 全局变量...

    Building.Dynamic.Web.2.0.Websites.with.Ruby.on.Rails

    《构建动态Web 2..0网站:使用Ruby on Rails》不仅是一本介绍Ruby on Rails基础知识的书籍,更是一部深入探讨Web 2.0时代下如何利用这一强大框架构建高效、安全、高性能的动态网站的实用指南。对于希望学习或深化...

    中文版rails教程

    在Ruby on Rails中,开发者可以快速构建功能丰富的动态网站,因为它提供了大量的内置功能和库,如数据库连接、ORM(对象关系映射)系统ActiveRecord、模板引擎ActionView以及路由系统ActionController等。...

    web开发_ruby_on_rails

    ### Web开发:深入理解Ruby on Rails #### 一、引言与概述 Ruby on Rails (简称Rails) 是一种用于Web开发的开源框架,基于Ruby语言。Rails的设计理念强调程序员的生产力和代码的简洁性,因此它成为了Ruby语言的...

    Ruby on Rails打造企业级RESTful API项目实战我的云音乐

    《Ruby on Rails打造企业级RESTful API项目实战——我的云音乐》是一本深入探讨如何使用Ruby on Rails框架构建高效、可扩展的企业级API服务的实战教程。Ruby on Rails(简称Rails)是基于Ruby语言的开源Web开发框架...

Global site tag (gtag.js) - Google Analytics