ThoughtBot开发的Jester库可以让你通过JS访问REST API，它提供了与ActiveRecord类似的语法，并同时支持JSON与XML。

使用很简单，以日历控件为例：

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.0/build/calendar/assets/calendar.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/calendar/calendar-min.js"></script>
<span id="cal1Container" style="width: 200px; display: block; float: none"></span>
<input id="obj_test" name="obj[test]" readonly="yes" size="12" value="2007-11-14" />
<script type="text/javascript">
     function selectDay(stuff, days) {
          $('obj_test').value = "" + days[0][0][0] + "/" + days[0][0][1] + "/" + days[0][0][2]
     }
     cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
     cal1.cfg.setProperty("selected","2007-11-14",false);
     cal1.render();
     cal1.selectEvent.subscribe(selectDay);
</script>

效果如下，文本框会跟随日期的改变而改变：

貌似需要一个rYUI项目让事情变得更简单一些？

1. 生成person resource

script/generate person country:string state:string

由于不再需要向服务端发送请求，因此没有必要生成一个单独的city resource。

2. 执行rake db:migrate
3. 修改app/views/layouts/people.rhtml，包含prototype：

<%= javascript_include_tag 'prototype' %>

4. 修改app/views/people/new.rhtml:

<%= update_page_tag do |page|
   page << "function change_state(country_value) {"
    page << 'if(country_value == "United States")'
      page['person_state'].replace_html options_for_select(US_STATES)
    page << 'else if(country_value == "China")'
      page['person_state'].replace_html options_for_select(CHINA_STATES)
    page << 'else'
    page['person_state'].replace_html options_for_select([['Not applicable', '']])
  page << "}"
end
%>
<p>
  <b>Country</b><br />
  <%= f.country_select :country, ['China', 'United States'], {:selected=>'China'},
     nchange => 'change_state(this.options[this.selectedIndex].value)'
%>
</p>
<p>
  <b>States</b><br />
  <%= f.select :state, CHINA_STATES %>
</p>

相比于上一篇，new.rhtml的改动还是比较大的：

• 我们使用country_select来自动生成国家select
• nchange方法现在指向本地的JS函数change_state，而非remote_function生成的一个AJAX函数。
• change_state函数没有向服务器发送请求，它在本地保存了所有支持国家的省份信息

5. 当然，我们需要定义两个名为US_STATES和CHINA_STATES的常量来保存两个国家的省份信息：

US_STATES = [["Please select", ""], [ "Alabama", "AL" ], [ "Alaska", "AK" ], ..........
CHINA_STATES = [["Please select", ""], [ "Beijing", "BJ" ], [ "Shanghai", "SH" ], ..........

6. 默认：

7. 选择United States:

8. 选择其他国家：

参考：

• .rjs and link_to_function
• Rails API参考

Plotr是一个基于PlotKit与MochiKit的轻量级Javascript制图库，目前支持的浏览器包括：

• Firefox 1.5+
• Safari 2.0+
• Opera 9.0+
• IE6+（作者声称支持，但我的测试结果是不行，至少IE6不行）

作者：sabmann
最新版本：0.2.0
下载：http://code.google.com/p/plotr/downloads/list
许可：BSD License

使用

Plotr依赖于prototype以及HTML Canvas，因此需要包含3个JS文件：

<script src="prototype.js" type="text/javascript"></script>
<script src="excanvas.js" type="text/javascript"></script>
<script src="plotr.js" type="text/javascript"></script>

Plotr的使用相当简单，下面是Plotr的官方示例：

<div><canvas id="bars1" height="300" width="500"></canvas></div>
<script type="text/javascript">
// Define a dataset.
var dataset = {
    'myFirstDataset': [[0, 1], [1, 1], [2, 1.414], [3, 1.73], [4, 2.56]],
    'mySecondDataset': [[0, 0.3], [1, 2.67], [2, 1.34], [3, 1.73], [4, 1.9]],
    'myThirdDataset': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2], [4, 2.4]],
    'myFourthDataset': [[0, .86], [1, 0.83], [2, 3], [3, 1.73], [4, 0.76]],
};
// Define options.
var options = {
    // Define a padding for the canvas node
    padding: {left: 30, right: 0, top: 10, bottom: 30},
    // Background color to render.
    backgroundColor: '#d8efb0',
    // Use the predefined blue colorscheme.
    colorScheme: 'grey',
    // Render a horizontal oriented barchart.
    barOrientation: 'vertical',
    // Set the labels.
    xTicks: [
        {v:0, label:'day 1'},
        {v:1, label:'day 2'},
        {v:2, label:'day 3'},
        {v:3, label:'day 4'}
    ]
};
// Instantiate a new BarCart.
var vertical = new Plotr.BarChart('bars1',options);
// Add a dataset to it.
vertical.addDataset(dataset);
// Render it.
vertical.render();
</script>

效果如下：

更多信息请访问这里。