3.6. Form Observers
本文共 2600 字，大约阅读时间需要 8 分钟。
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' %>
这种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 });
}
)
这段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});
}
}
现在问题是没有给参数一个名字，所以在服务器端收不到可用的params对象，:with选项给参数一个名字，如果:with设定为foo，代码就变成： new Form.Element.EventObserver('textToReverse',
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' } %>
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});
}
)
本文转自 fsjoy1983 51CTO博客，原文链接：http://blog.51cto.com/fsjoy/91468，如需转载请自行联系原作者