在 Ruby on Rails 中使用 Ajax

在本教程中，我们将介ç»?在 NetBeans Ruby on Rails 项目中添加 Ajax 支æŒ?。教程示例展示了如何在 web 日志中动æ€?地添加评论。

目录 -  教程需求 -  创建样例数æ?®åº“ -  创建局部模æ?¿ -  添加 Ajax 支æŒ? -  添加 RJS 实现动æ€?更新 -  更上一层楼：应用视觉特效

教程需求

学习本教程需è¦?以下技术和资æº?：

• 数æ?®åº“æœ?务器
• 带有 Ruby 支æŒ?的 NetBeans IDE 6.0

创建样例数æ?®åº“

1. 打开一个命令行窗å?£ã€‚
2. 如果 MySQL 数æ?®åº“æœ?务器尚未被å?¯åŠ¨ï¼Œè¯·å…ˆå°†å…¶å?¯åŠ¨ã€‚
3. 键入如下命令æ?¥åˆ›å»ºå¼€å?‘æ•°æ?®åº“，并按“Enterâ€?键。

   mysqladmin -u root -p create rubyweblog_development

   注æ„?：如果 root 用户ä¸?è¦?求密ç ?，请çœ?略 -p å?‚数。
   

4. 在 IDE 中打开 rubyweblog 项目。

   注æ„?：如果是åˆ?次打开或者创建 Ruby 项目，IDE 会检查您是å?¦æœ‰é™¤äº†ç»‘定的 JRuby 软件之外其他的 Ruby 安装。如果有，IDE 会显示一个对è¯?框，询问您选择使用哪个软件。若您想è¦?使用绑定的 JRuby 解释器，选择 JRuby；或者您喜欢使用您自己的 Ruby 安装，那就选择您自己的安装。更多信æ?¯ï¼Œè¯·å?‚考《安装和é…?ç½® Ruby》教程中的é…?ç½® IDE 使用您自己的 Ruby 安装一节。

5. 如果您的数æ?®åº“è¦?求密ç ?，请编缉 database.yml 文件，并在开å?‘é…?置部分中æ??供密ç ?。ä¿?存该文件。

   è¦?快速访问 database.yml 文件，按 Alt+Shift+O（在 Mac 系统中按 Ctrl+Shift+O），在“文件å??â€?文本框中键入 database.yml，然å?ŽæŒ‰â€œEnterâ€?键。

6. å?³é”®ç‚¹å‡» rubyweblog 节点，选择“è¿?移数æ?®åº“â€?>“到当å‰?版本â€?。

   该æ“?作会更新数æ?®åº“以加入 posts 表和 comments 表。 è¿?移完æˆ?时会在“输出â€?窗å?£æ˜¾ç¤ºã€‚
7. è¿?行应用程åº?并å?‘表一篇新文章。

8. 点击“Permalinkâ€?，然å?Žç»™è¯¥æ–‡ç« æ·»åŠ ä¸€æ?¡è¯„论。

   å?¯ä»¥å?‘现当添加评论时，整个页é?¢éƒ½è¢«é‡?新加载了。

创建局部模æ?¿

在当å‰?的 rubyweblog 项目中，无论何时读者å?‘页é?¢æ·»åŠ è¯„论，页é?¢ä¸Šçš„ blog æ?¡ç›®å’Œæ‰€æœ‰è¯„论都会被é‡?新载入。更好的解决方案是使用 Ruby on Rails 框架中的 Ajax 支æŒ?æ?¥åŠ¨æ€?加载这些评论。作为使用 Ajax 的预先准备，需è¦?创建局部模æ?¿æ?¥å­˜å‚¨ç”¨äºŽæ˜¾ç¤ºè¯„论的代ç ?。使用局部模æ?¿çš„好处是å?¯ä»¥å¤šæ¬¡è°ƒç”¨å±€éƒ¨æ¨¡æ?¿ï¼ˆæ˜¾ç¤º blog 中æ¯?个评论需è¦?一次）， 而无需渲染 blog æ?¡ç›®æœ¬èº«ã€‚

1. å?³é”®ç‚¹å‡» rubyweblog 节点，选择“新建â€?>“RHTML Fileâ€?。将文件命å??为 _comments，并将其放置在 app\views\blog 文件夹中。

   IDE 会创建 _comments 文件，并将其在编辑区打开。 注æ„?，局部模æ?¿çš„文件å??使用下划线（_）开头，以区别于完全模æ?¿ã€‚

   当å‰?，显示评论的代ç ?在文件 show.rhtml 中。而在下一步，则会从 show.rhtml 中删除这部分代ç ?，并将代ç ?粘贴至局部模æ?¿ _comments.rhtml 中。

2. 转至 rubyweblog >“Viewsâ€?> blog 文件夹 ，并打开 show.rhtml。剪切用于显示评论的代ç ?（如代ç ?示例 1 中所示）。将代ç ?粘贴至 _comments.rhtml 文件，替æ?¢å…¶ä¸­æ‰€æœ‰å·²æœ‰å†…容。

   代ç ?示例 1：从 show.rhtml 中剪切，并粘贴至 _comments.rhtml 中的代ç ?

   <ul> <% @post_comments.each do |comment| %> <li><%= h comment.comment %><br> <div style="color: #999; font-size: 8pt"> Posted on <%= comment.created_at.strftime("%B %d, %Y at %I:%M %p") %> </div> </li> <% end %> </ul>

   
   

3. 返回 show.rhtml 文件，æ?’入下é?¢çš„ HTML <div> 标签。将其添加在 <h4>Comments</h4>之å?Žï¼Œä¹‹å‰?被删除的代ç ?的ä½?置。

   代ç ?示例 2：用于 show.rhtml 的 <div> 标签

   <div id="comments"> <%= render(:partial => 'comments', :object => @post_comments) %> </div>

   
   此段代ç ?会创建一个å??为 comments 的 <div> 元素。@post_comments å?˜é‡?包å?«äº†å±€éƒ¨æ¨¡æ?¿ _comments 显示的评论。

4. 选择“文件â€?>“全部ä¿?存â€?，然å?Žè¿?行应用程åº?。

5. 点击“Permalinkâ€?，然å?Žç»™æ–‡ç« æ·»åŠ ä¸€æ?¡è¯„论。

   此时，应用程åº?的表现和å‰?é?¢å¦‚出一辙。但它现在已被设计æˆ?å?¯ä»¥å¼€å§‹ä½¿ç”¨ Ajax 支æŒ?了。

添加 Ajax 支æŒ?

在项目中添加 Ajax 支æŒ?的第一步是加入 JavaScript 库，Prototype 和 script.aculo.us。这些库是与 Ruby on Rails 绑定在一起的。Prototype 库æ??供了 Ruby on Rails 中 Ajax 实现的基础，而script.aculo.us 库则æ??供了视觉特效，å?¯åœ¨åº”用程åº?中éš?æ„?添加。

1. 展开“Viewsâ€?>“layoutsâ€?，然å?Žæ‰“å¼€ blog.rhtml 文件。

2. 在包å?« stylesheet_link_tag 的行下é?¢ï¼Œæ·»åŠ å¦‚下代ç ?行：

     <%= javascript_include_tag :defaults %>
     

   此行代ç ?会加入与 Ruby on Rails 绑定的 JavaScript 库：Prototype 和 script.aculo.us。下一步是创建 form_remote_tag，以触å?‘ Ajax 动作。

3. 打开 show.rhtml 文件。删除已有的 form_tag（执行 HTTP POST），并将其替æ?¢æˆ?下é?¢çš„ form_remote_tag（执行 XMLHTTPRequest）。

     <% form_remote_tag :url => {:action => "post_comment"} do %>
       

   此行代ç ?会触å?‘用于 blog_controller.rb 文件中 post_comment æ“?作的 Ajax 动作。而此时，整个页é?¢ä»?然会在读者æ??交评论时é‡?新加载。这是因为post_comment 动作会通过调用 show 动作强制é‡?新加载。最å?Žä¸€æ­¥å?³æ˜¯ç¼–缉 blog_controller.rb 文件，删除该调用。
4. 展开“Controllersâ€?节点，打开 blog_controller.rb 文件。
5. 滚动至 post_comment 动作，注释掉 redirect_to 调用。

   # redirect_to :action => 'show', :id => flash[:post_id]
    

   如果您现在就è¿?行应用程åº?，并添加一æ?¡è¯„论，则该评论ä¸?会被显示出æ?¥ã€‚您必须在下一步æ?’å…¥ Ruby JavaScript （RJS）模æ?¿æ?¥å¤„ç?† XMLHTTPRequest。

添加 RJS 实现动æ€?更新

最å?Žçš„步骤是使用内建的 RJS 支æŒ?æ?¥åŠ¨æ€?更新 blog 上的评论。

1. 在“Viewsâ€?节点中，å?³é”®ç‚¹å‡»â€œblogâ€?节点，选择“新建â€?->“Empty RJS Templateâ€?。

2. 设置“文件å??â€?为 post_comment，并将其仿真在 app\views\blog 文件夹中。

3. 删除已有的页é?¢å¯¹è±¡ï¼Œç„¶å?Žåœ¨è¯¥ä½?ç½®æ?’入下é?¢çš„页é?¢å¯¹è±¡ã€‚

     page.replace_html 'comments', :partial => 'comments', :object => @post_comments
     page[:comment_comment].clear
     

   回忆一下，show.rhtml 文件包å?«ä¸€ä¸ªå??为 comments 的 HTML div 标签（å?‚è§?代ç ?示例 2）。在此段代ç ?的第一行中，replace_html 使用 DHTML 动æ€?地将 show.rhtml 文件中该 div 标签内的这一部分 HTML 代ç ?替æ?¢ä¸ºå±€éƒ¨æ¨¡æ?¿ _comments.rhtml 中的 HTML 代ç ?。而@post_comment å?˜é‡?则å?«æœ‰å±€éƒ¨æ¨¡æ?¿ _comments 显示的评论。此段代ç ?的第二行会在用户æ??交评论å?Žæ¸…空文本框。

   ä¸?过您现在è¿?行该应用程åº?，评论ä¾?然ä¸?会显示，因为å?˜é‡? @post_comment 是空的。如果您回头看看 blog_controller.rb 文件，您会å?‘现 @post_comment 是在 show 动作中设置的，而它ä¸?å†?被调用了。因此现在必须编缉 blog_controller.rb 文件。

4. 打开 blog_controller.rb 文件，找到 post_comment 动作，在早先注释掉的é‡?定å?‘语å?¥å?Žé?¢æ·»åŠ å¦‚下三行代ç ?：

   代ç ?示例 3：用于 blog_controller.rb 文件的更新

   #redirect_to :action => 'show', :id => flash[:post_id] @post = Post.find(flash[:post_id]) @post_comments = @post.comments.collect flash[:post_id] = @post.id #Store the post.id back in the flash

   
   

   此段代ç ?的第一行会调用 flash（类似 HTTP 会è¯?，但å?¯ä»¥è·¨è¶Šå?•ä¸ªè¯·æ±‚）。当在 flash 中放入一个物å“?时，该物å“?对下个请求å?¯ç”¨ï¼Œä½†ç„¶å?Žå°±æ¶ˆå¤±äº†ï¼ˆå› æ­¤ä½¿ç”¨æœ¯è¯­â€œflashâ€?称之）。此段代ç ?从 flash 中获å?– post_id（1, 2, ...），并使用该 id 查找与之相关è?”çš„ blog 文章。

   此段代ç ?的第二行会把该文章的整个评论集å?ˆæ”¾åˆ°å?˜é‡? @post_comment 中，该å?˜é‡?会在之å?Žè¢«ä¼ é€’至局部模æ?¿ _comments 中。

   此段代ç ?的最å?Žä¸€è¡ŒæŠŠ post_id 放回 flash 中，这样å?¯ä»¥ä¸ºç”¨æˆ·æ??交的下一æ?¡è¯„论å?šå¥½å‡†å¤‡ã€‚

5. è¿?行项目，验è¯?一下评论能被动æ€?更新了。

更上一层楼：应用视觉特效

之å‰?在项目中加入的 script.aculo.us 库æ??供了视觉特效，å?¯ä»¥ä½¿ç”¨è¿™äº›ç‰¹æ•ˆæ?¥æ”¹å–„应用程åº?的外观和用户体验。在此，我们将应用一个特效æ?¥é«˜äº® blog 中的最新评论。在应用该特效之å?Žï¼Œæ‚¨å°±å?¯ä»¥æ–¹ä¾¿çš„替æ?¢å¹¶å°?试 script.aculo.us 库中的其他特效了。

1. 打开文件 _comments.rhtml，将行 <li> <%= comment.comment %><br> 替æ?¢æˆ?下é?¢çš„代ç ?å?—：

   代ç ?示例 4：判定最新评论的代ç ?

   <% if @post_comments.index(comment) == @post_comments.length-1 %> <li id="new_comment"><%=h comment.comment %><br> <% else%> <li><%=h comment.comment %><br> <% end %>

   
   此段代ç ?的第一行判断一个评论是å?¦æ˜¯æœ€æ–°çš„。若是，则在代ç ?的第二行给该评论分é…? id new_comment，因为该评论是我们想è¦?应用视觉特效的。

2. 切æ?¢è‡³ post_comment.rhtml 文件，并添加下é?¢è¿™è¡Œé«˜äº®æ–°è¯„论的代ç ?：

     page[:new_comment].visual_effect :highlight
     

3. 选择“文件â€?>“全部ä¿?存â€?，然å?Žåˆ·æ–°æµ?览器。添加一æ?¡è¯„论，å?Œæ—¶ç•™æ„?该新评论是被如何简明地高亮的。

   图 1：带有高亮显示的评论模型视图

   

更多内容

• 想è¦?获å?–支æŒ?以å?Šäº†è§£ NetBeans Ruby 开å?‘特性的最新动å?‘，请加入 和 邮件列表。

• 想è¦?æ??交您自己的 NetBeans Ruby 教程，请访问 NetBeans 社区文档 页é?¢ã€‚

>> 更多 NetBeans Ruby 文档