NetBeans Ruby on Rails中使用Ajax(二)

本教程以 《建立Rails模型间的关系》 一文为基础。如果已经学完该教程，那么您可以使用在该教程中构建的项目直接阅读 下一节 。否则，下载 RubyWebLogModel.zip 文件并遵循这些步骤创建示例数据库。

添加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 %>
      
      

这行代码包含JavaScript库（Prototype和script.aculo.us），这两个库都绑定在Ruby on Rails中。下一步需要创建一个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动作。现在，当读者提交评论时，仍然会重新加载整个页面。使用form_remote_ tag并包含Javascript库之后，页面将不再发送提交请求。程序现在寻找某些Javascript进行执行，但我们尚未编写这些Javascript代码。然而，如果强行刷新页面，您可以验证评论已经被添加。

4.       展开Controllers节点并打开blog_controller.rb文件。

5.       滚动到post_comment动作并用以下代码替换现有的redirect_to方法调用。

代码示例3：render方法调用

render :update do |page|   page.insert_html :bottom, 'comments', :partial => 'comment'   page[:comment_comment].clear   flash.keep(:post_id) end

以上代码将_comment.rhtml partial动态插入到评论<div>标记的底部。将post_id保存在缓存中非常重要，否则，用户插入的任何附加评论的post_id都为零，从而变成孤立评论（评论表中没有定义任何参照完整性）。

6.       运行项目并验证评论已动态更新。

进阶：应用可视效果

之前在项目中包含的script.aculo.us库可以提供可视效果。您可以用它来增强应用程序的外观和式样。此处，我们将应用效果高亮显示博客中的最新评论。应用此效果后，您可以很容易地学习和尝试script.aculo.us库中的其它效果。

1.       打开_comment.rhtml文件，并将下以粗体显示的id属性添加到已有<li>标记中。

代码示例4：确定最新评论的代码

<li id=<%= "comment_#{comment.id}" %>>

这行代码用于标记您将要应用视觉效果的评论。

2.       切换到blog_controller.rb文件，将以下代码添加到render :update提供的代码块的末尾。

 page["comment_#{@comment.id}"].visual_effect :highlight, :duration => 3.5
      
      

3.       选择File > Save All，然后刷新浏览器（此操作为必需，这样Rails才能生成用于处理可视效果的Javascript代码并将其发送到浏览器）。添加一条评论，您会发现新评论将高亮显示。

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

未来计划

·                     要获取支持和了解最新的NetBeans Ruby开发特性，请加入 <script type="text/javascript"> </script> 和 <script type="text/javascript"> </script> 邮件列表。

·                     要提交您自己的NetBeans Ruby教程，请访问NetBeans社区文档页面。