3.6. Form Observers
observe_field helper
允许你把行为放到一个地方上，无论何时它发生了变化，服务器都会通过ajax知道，用法类似于这样：
<p>Text to reverse: <%= text_field_tag 'text_to_reverse' %></p>
<span id="reversed"></span>
<%= observe_field 'text_to_reverse',
:update => 'reversed',
:url => { :action => 'reverse' },
:with => 'text_to_reverse' %>
<span id="reversed"></span>
<%= observe_field 'text_to_reverse',
:update => 'reversed',
:url => { :action => 'reverse' },
:with => 'text_to_reverse' %>
这种helper的工作方式到目前为止我们是没有见过的。我们见到的其他的helper都是输出HTML（例如，链接，表单标签）在这个例子中，是用text_field_tag创建了一个form，那么observe_field创建了什么？它其实创建了一段JavaScript：
new Form.Element.EventObserver('textToReverse',
function(element, value) {
new Ajax.Updater('reversed', '/chapter3/reverse',
{ parameters:'text_to_reverse=' + value });
}
)
function(element, value) {
new Ajax.Updater('reversed', '/chapter3/reverse',
{ parameters:'text_to_reverse=' + value });
}
)
这段Javascript新建了Prototype的Form.Element.EventObserver类的一个实例，这个实例和text_to_reverse这个框绑定了，当这个框中的内容发生改变时，observer触发Ajax.Updater，在第二章时已经对它很熟悉了。关于Form.Element.EventObserver的详细描述，见第十章。
对于observe_field中可用的选项跟link_to_remote一样，包括（:update, :url, callback等等），新加的一些选项有:with选项，内容是一个被执行的Javascript表达式，执行之后决定要传递给服务器的参数。当默认情况下执行JavaScript内容时，得到一个value，显示被观察区域中的value。所以如果没有:with选项，产生的Javascript代码是这样：
new Form.Element.EventObserver('textToReverse',
function(element, value) {
new Ajax.Updater('reversed', '/chapter3/reverse',
{parameters:value});
}
}
function(element, value) {
new Ajax.Updater('reversed', '/chapter3/reverse',
{parameters:value});
}
}
现在问题是没有给参数一个名字，所以在服务器端收不到可用的params对象，:with选项给参数一个名字，如果:with设定为foo，代码就变成：
new Form.Element.EventObserver('textToReverse',
function(element, value) {
new Ajax.Updater('reversed', '/chapter3/reverse',
{parameters:'foo='+value});
}
}
function(element, value) {
new Ajax.Updater('reversed', '/chapter3/reverse',
{parameters:'foo='+value});
}
}
但这样并不彻底，因为helper还在:with选项上有点魔法。如果:with选项中不包含=号，它会将foo解释为一个参数，像这样
'foo='+value。但是如果
:with
选项包含
=
号，它依然没有改变
foo=bar
依然是
foo=bar
。在这个例子中，如果输入
foo=bar
，那么提交的值并不是文本框中的内容，而是
”foo”
，这可能有用，但是在这个例子中，并不是我们期望发生的。
:frequency
选项可以允许你指定
callback
发生的频率（以秒为单位）。将这个选项留空（或者是设定为
0
）的话，
callback
会依赖于文本框的
onchange
事件。这个例子中，当有输入的时候并不会触发
onchange
事件，而当文本框失去焦点的时候（用户跳到下个地方，或者是点击页面的其他地方）会触发。因此，如果你希望当用户还在改变文本框内容时触发
callback
的话，最好提供一个
:frequency
的值，譬如
0.5
，每隔半秒钟检查文本框内容的改变。
可以使用:function选项来替代使用:url选项，以此来提供一段当文本框改变时执行的Javascript代码。例如:function=>”alert(value)”, 会跳出一个警示框显示文本框中的内容。
3.6.1
. Observing an Entire Form
observe_field
的大哥哥
observe_form
和它相似，但是不是只观察一个地方，而是对于整个表单。
<form id="myForm">
<p>Text to reverse: <%= text_field_tag 'text_to_reverse' %></p>
<p id="reversed"></p>
</form>
<%= observe_form 'myForm',
:update => "reversed",
:url => { :action => 'reverse' } %>
<p>Text to reverse: <%= text_field_tag 'text_to_reverse' %></p>
<p id="reversed"></p>
</form>
<%= observe_form 'myForm',
:update => "reversed",
:url => { :action => 'reverse' } %>
observe_form
对form ID是myForm的表单建立一个观察点，所以当表单的任意一个地方发生了变化，Ajax.Updater都会依据变化被调用并且是把表单中的value发送到服务器端。Observe_field和observe_form的options参数一样。关于Form.EventObserver的更多内容参见第十章。
new Form.EventObserver('myForm',
function(element, value) {
new Ajax.Updater('reversed', '/chapter3/reverse',
{parameters:value});
}
)
function(element, value) {
new Ajax.Updater('reversed', '/chapter3/reverse',
{parameters:value});
}
)
本文转自 fsjoy1983 51CTO博客，原文链接：http://blog.51cto.com/fsjoy/91468，如需转载请自行联系原作者
