NetBeans Ruby on Rails中使用Ajax(一)

转帖|其它|编辑:郝浩|2008-10-09 11:30:51.000|阅读 1395 次

概述:NetBeans Ruby on Rails中使用Ajax(一)

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

  在本教程中,我们将为NetBeans Ruby on Rails项目添加Ajax支持,这个例子将演示如何在web日志中动态地添加评论。

教程的先决条件

本教程需要以下技术和资源:

  • 一个数据库服务器
  • 支持Ruby的NetBeans IDE 6.0

  注意:本教程针对Rails 1.2.5编写,并涉及支架(scaffolding)。Rails 2.0已不再支持支架(scaffolding)。

创建示例数据库

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

  注意:本教程使用MySQL数据库服务器。有关在Ruby应用程序中使用MySQL数据库服务器的更多信息,请参阅《安装和配置Ruby支持》。这篇文章还阐述了如何使用Java DB数据库服务器。

  1.       打开一个命令窗口。

  2.       如果尚未启动MySQL数据库服务器,请启动它。

  3.       键入下列命令创建开发数据库,并按下回车键。

  mysqladmin -u root -p create rubyweblog_development注意:如果root用户不需要密码,则省略-p参数。

  4.       在IDE中打开rubyweblog项目。

  注意:当您第一次在IDE中打开或创建Ruby项目时,IDE会检查除绑定的JRuby软件外是否还存在其他Ruby安装。如果存在,则IDE将弹出对话框询问您选择使用哪个软件。如果想用绑定的JRuby解释器就选择JRuby,或者选择您自己的Ruby安装(如果更喜欢它)。有关更多信息,请参阅《安装和配置Ruby》教程中的“配置IDE使用您自己的Ruby安装”部分。

  5.       如果数据库需要密码,请编辑database.yml文件并在开发配置中提供密码。保存文件。

  要快速访问database.yml文件,可以使用Alt+Shift+O组合键(Mac机上为Ctrl+Shift+O),在File Name文本框中键入database.yml并按下回车键。

  6.       右键单击rubyweblog节点并选择Migrate Database > To Current Version。

  此操作将更新数据库,使其包括帖子表和评论表。Output窗口将指示迁移的完成情况。

  7.       运行程序并创建一篇新帖子。

  8.       单击Permalink并为帖子添加评论。

  注意:添加评论之后,整个页面将重新加载。

创建Partial模板

  在rubyweblog项目中,当读者在页面中添加评论时,页面会重新加载其中的博客条目和评论。更好的解决方案是,使用Ruby on Rails框架提供的Ajax支持来动态加载评论。要准备使用Ajax,请创建一个partial模板,在其中存放用于显示评论的代码。使用partial的优点在于您可以多次调用partial(博客中的每条评论调用一次)而无需重新加载博客条目本身。

  1.       右键单击rubyweblog节点并选择New > RHTML File。将文件命名为_comment并存放在app\views\blog文件夹中。

  IDE将创建一个_comment文件并在编辑区域中将其打开。注意,partial模板以下划线(_)开头,以区别于full模板。

  当前,用于显示评论的代码保存在文件show.rhtml中。在下一个步骤中,您将从show.rhtml中删除此代码并将其粘贴到_comment.rhtml partial模板中。

  2.       进入rubyweblog > Views > blog文件夹并打开show.rhtml。剪切用于显示评论的代码(如代码示例1所示)。将代码粘贴到_comment.rhtml中,替换此文件中所有现有内容。

  代码示例1:从show.rhtml剪切并粘贴到_comment.rhtml中的代码
 
  <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> 

  3.       返回到show.rhtml文件并删除以下两行代码。

  <% @post_comments.each do |comment| %> <% end %>4.       插入以下代码示例中以粗体显示的<div>元素。将代码添加到前面删除两行代码的位置。

  代码示例2:show.rhtml的<div>标记
 
  <hr><h4>Comments</h4> <ul>  <div id="comments">    <% @post_comments.each do |comment| %>        <%= render :partial=>"comment", :object => comment %>    <% end %>  </div></ul>

  该代码将创建一个名为comments的<div>元素。@post_comments变量包含_comment partial显示的评论。

  5.       选择File > Save All,然后运行应用程序。

  6.       单击Permalink按钮,并为帖子添加一条评论。

  现在,程序的功能和以前完全相同。但经过设计之后,您的程序已经可以开始使用Ajax支持。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:CSDN

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP