ROR with AJAX support

最新推荐文章于 2017-06-12 10:04:42 发布

topgun1070399

最新推荐文章于 2017-06-12 10:04:42 发布

阅读量98

点赞数

文章标签： Ajax EXT Rails JavaScript prototype ViewUI

ROR with AJAX support

Ruby on Rails 和AJAX这两个炙手可热的应用，相信大家都已经不再陌生。前者完全遵循MVC、约定优于配置等思想给开发人员带来了无与伦比的生产率；后者则是RIA(Rich Internet Application)的代表技术之一。

最近笔者就如何在ROR项目当中使用AJAX来增强用户体验，尤其是如何将一些成熟的AJAX框架融入ROR当中，做了一些尝试和总结。下面分别介绍一下Prototype, script.aculo.us,EXT和Streamline在Rails框架中的应用(欢迎和我探讨交流，偶在西安一家软件公司供职。MSN:josephzy@hotmail.com)

一． Prototype

prototype.js是由Sam Stephenson写的一个javascript类库,在Rails框架中得到了内在的支持。prototype.js文件默认是在public/javascripts目录下。在Rails应用中使用Prototype的步骤如下：

在rhtml页面中导入prototype.js

<%= javascript_include_tag :defaults %>

或者

<%= javascript_include_tag :prototype%>

要将 Ajax 添加到这个应用程序中，需要以下几个步骤：

1. 配置 Rails 以使用 JavaScript。

2. 更改链接来提交 JavaScript Ajax 请求，而不是仅呈现一个 HTML 链接。

3. 指定要更新的 HTML 片断。

4. 为更新的 HTML 内容准备一个位置。

5. 构建一个控制器方法，或者一个视图来呈现 Ajax 响应。

具体的例子大家可以参考Bruce Tate的跨越边界系列和<<Ajax on Rails>>

二．script.aculo.us

script.aculo.us(http://script.aculo.us)是另一个提供对Rails框架直接支持的javascript类库。它的安装和使用也很简单，从script.aculo.us的下载页面取得以下的几个js文件：prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js 和 controls.js，同样放在public/javascripts目录下。在header中加入

<%= javascript_include_tag : prototype%>

<%= javascript_include_tag : scriptaculous %>

默认情况下，scriptaculous.js会加载该类库所有的特性。如果你在项目中并不需要多余的特性，可以在引用的时候加以限制

这就是说，仅选用builder ，effects ，dragdrop ，controls ，slider 中的两个特性。

为节省篇幅，举一个简单的UI component通过拖拽排序的简单例子

Rhtml页面：

<% 6.times do |i| -%>

<li id="item_<%= i+1 %>" class="expand_ticket_box">Number <%= i+1 %></li>

<% end -%>

</ul>

<%= sortable_element 'list',

: update => 'list-info',

: complete => visual_effect(:highlight, 'list'),

:url => { :action => "order" } %>

Action：

def order

@order = params[:list]

render :partial => 'list'

end

_list.rhtml:

Updated order is:<%= @order.join(', ') %>.

在实际的应用中，我们可以把6.times 替换成实际的DB数据。

图1 排序前

图2 鼠标拖拽排序

三.EXT

EXT(http://extjs.com)也许是目前功能最强大，最流行的javascript框架。将EXT用于ROR，的确是一件很cool的应用。

本例是一个在可排序的表格中显示上映影片的例子，其中使用了JSON来传递数据到浏览器。

在需要显示的页面页面中，我们除了导入必要的CSS以外，还必需导入prototype.js, scriptaculous.js, effects.js, ext-prototype-adapter.js, and ext-all-debug.js。我们将以上这些必须的js文件放在public/javascripts/ext目录下。

在application.rhtml页面的head中加入如下代码：

<%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>

<%= javascript_include_tag "ext/adapter/prototype/prototype.js" %>

<%= javascript_include_tag "ext/adapter/prototype/scriptaculous.js" %>

<%= javascript_include_tag "ext/adapter/prototype/effects.js" %>

<%= javascript_include_tag "ext/adapter/prototype/ext-prototype-adapter.js" %>

<%= javascript_include_tag "ext/ext-all-debug.js" %>

在视图模板list.rhtml中，我们创建一个Div，用来显示将要生成的表格。我们给该Div赋一个id 'movies_grid' 。这个id将会在随后的js代码中使用，以初始化表格信息。

视图模板 (list.rhtml)

<%= javascript_include_tag "grid-paging.js" %>

接下来，我们需要编写一些javascript代码来初始化并显示Ext表格。首先创建一个js文件grid-paging.js，在其中持有将在页面显示的数据。通过调用Ext.onReady方法，表格会在页面加载的时候初始化。先创建一个Ext.data.Store对象作为client端的 data store。在这个对象中，再创建一个Ext.data.HttpProxy通知表格从什么地方取得数据。同时，制定一个JsonReader来读取数据。最后，把remoteSort设置为true，以通知store排序会在server端进行，每次当任意一个column header被点击，一个新的数据请求就会被发往server处理。