JavaScriptHelper之 observe_field
修改表单中某项的数据值可以触发交互操作。用户首先改变表单中某一特定项的值，随后，这个动作会被观察器察觉并进一步调用与之相关联的
行为方法。在这个过程中 ，观察器是通过 observe_field 标签实现的。
observe_field 标签的详细用法：
R 1 ：创建 controller 控制器类 ObserveAjaxTagController ，以及相应的模板 index.rhtml
controller 控制器类 ObserveAjaxTagController 对应的文件为 observe_ajax_tag_ controller.rb ，位于 app/controllers 目录下。
index.rhtml 文件位于 app/views/observe_ajax_tag 目录下。
P: 可以使用命令 ruby script/generate controller observe_ajax_tag index 完成创建。
R 2 ：编辑 observe_ajax_tag_controller.rb 文件，完整后的代码如下:
1 class ObserveAjaxTagController < ApplicationController
2 before_filter :set_charset
3
4 def set_charset
5 @headers["Content-Type"] = "text/html; charset=utf-8"
6 end
7
8 def index
9 render(:template => "observe_ajax_tag/index")
10 end
11
12 def time_show
13 render(:text => Time.now)
14 end
15 end
第 2~6 行：设定输出模板文件的字符集为 utf-8 。
第 8~10 行：显式指定模板文件。
第 12~14 行：获得当前时间。
R 3 ：编辑 index.rhtml 文件,完整代码如下：
1 <html>
2 <head>
3 <title>observe_to_remote 测试 </title>
4 <%= javascript_include_tag "prototype" %>
5 </head>
6 <body>
7 <p>
8 <%= radio_button (:time, :now, "show") %> 显示时间 <br/>
R8生成的HTML代码如下 : <input id ="time_now_show" name ="time[now]" type ="radio" value ="show" / >显示时间<br / >
9 <%= observe_field(:time_now_show,
10 :frequency => 1,
11 :update => :time_show_place,
12 :url => {:action => :time_show}) %>
13 <div id="time_show_place"></div>
14 </p>
15 </body>
16 </html>
第 4 行：使用 javascript_include_tag 标签来包含 prototype.js 文件。
第 8 行：定义单选框。
第 9~12 行：使用 observe_field 标签定义观察器 。 :time_now_show 是与观察器相关联组件的 id 值（本例中为第 8 行定义的单选框）； :frequency 参数项用 于指定监视周期 ，即响应时间 。本例中指定监视周期为 1 秒 ； :update 参数项用于指定更新区域的 id 值 ； :url 参数项指定了所要请求的行为方法 。本段代码生成的 HTML 代码如下。
<script type="text/javascript">
//<![CDATA[new Form.Element.Observer('time_now_show', 1, function (element, value) {new Ajax.Updater('time_show_place', '/observe_ajax_ tag/time_show', {asynchronous:true, evalScripts:true, parameters: value})})//]]>
</script>
第 13 行：定义了列表更新区域，响应结果会显示在该处。
R 4 ：测试 启动 WEBrick 服务器，在 IE 地址栏中输入 http://localhost:3000/observe_ajax_ tag ，
| :frequency : | The frequency (in seconds) at which changes to this field will be detected. Not setting this option at all or to a value equal to or less than zero will use event based observation instead of time based observation. |
| :update : | Specifies the DOM ID of the element whose innerHTML should be updated with the XMLHttpRequest response text. |
| :with : | A JavaScript expression specifying the parameters for the XMLHttpRequest. The default is to send the key and value of the observed field. Any custom expressions should return a valid URL query string. The value of the field is stored in the JavaScript variable value . Examples :with => "'my_custom_key=' + value" Finally :with => 'name' is shorthand for :with => "'name=' + value" This essentially just changes the key of the parameter. |
| :on : | Specifies which event handler to observe. By default, it‘s set to "changed" for text fields and areas and "click" for radio buttons and checkboxes. With this, you can specify it instead to be "blur" or "focus" or any other event. |