将表单连接到 Javascript 对象（以及其他最佳实践建议）
多年来我一直在使用 javascript 在网站上执行轻量级功能 - DOM 操作等 - 但现在我开始研究使用它来执行更多繁重的工作（与 PHP 结合）。 我才刚刚开始接触 OO JS，并且仍在努力了解与其配合良好的最佳实践和设计模式。
更具体地说 - 我的问题是，这里有人可以建议将表单连接到 javascript 对象的技术吗？
在我当前的实现中，我有一个 JS 对象，可以通过（相当大的）表单进行编辑。 当我实例化该对象时，我将一个 onchange 观察器附加到表单，其回调将表单字段与对象参数同步。 我正在处理通过 AJAX 提交的表单 - 还有一个定期请求将表单信息的临时版本保存到 mySQL DB。 我想知道的一件事是是否可以轻松处理另一个方向的同步 - 表单字段更新的对象变化（例如在表单重置时）。
我很想知道这种方法是否正确/明智，更一般地说，我很有兴趣听到有关 OOJS 表单处理的建议。
提前干杯:)
（我正在使用原型顺便说一句）
I've been using javascript to do lightweight functionality on sites for years - DOM manipulation etc - but just now im beginning to investigate using it to do a lot more of the heavy lifting (in combo with PHP). I've only just started getting into OO JS, and im still trying to get my head around the best-practices and design patterns that work well with it.
To be more specific - my question is, can anyone here suggest techniques for connecting a form to a javascript object?
In my current implementation I have an JS object that can be edited by a (fairly large) form. When I instantiate the object I attach an onchange observer to the form, whose callback syncs the form fields with the object parameters. I'm handling the form submitting through AJAX - there is also a periodic request that saves a temporary version of the form info to a mySQL DB. One thing I wonder is whether it is possible to easily handle syncing in the other direction - onchange of the object the form fields update (on form reset for instance).
I am interested to know if this approach is a correct/sensible one, and more generally I would be very interested to hear advice with regard to OOJS form handling.
Cheers in advance :)
(Im using Prototype btw)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以使用
$("form").serialize(true);http://www.prototypejs.org/api/form/serialize
你不需要onchange事件，你只需在每次需要获取表单数据时调用serialize()方法即可。
You can use
$("form").serialize(true);http://www.prototypejs.org/api/form/serialize
You dont need the onchange event, you can just call the serialize() method every time you need to get the form data.
为什么不在对象中创建一个方法来将对象与表单重新同步？ 并在对象的每次更改时调用它？ 您可以创建一个特殊的更改函数以确保每次更改时都会调用它。
Why not create a method in you object that resyncs the object with the form? And call that on every change of the object? You could create a special change function to assure that it gets called on every change.
这是一个完全合理的方法。 JS 并不完全鼓励这种事情，因为它的对象系统很奇怪，特别是绑定方法不是一流对象，但通过一些合适的元类和回调胶水，这是完全可能的。
如果您想免费获得更多此类低级表单处理内容，您可能还需要查看小部件库。 还没有尝试过基于 Prototype 构建的那些； 其他可能性包括 YUI 的可能性。
从服务器更新模型非常简单。 通常，您会轮询 AJAX 请求，并让服务器传回差异（如果知道），或者只是为每个对象更新添加时间戳，在每次更新时将新对象详细信息发送到客户端，并让客户端决定如何将其与用户同时所做的任何更改合并。
It's a perfectly reasonable approach. JS doesn't entirely encourage this sort of thing due to its curious object system and in particular the way bound methods are not first-class objects, but with a bit of suitable metaclass and callback glue it's eminently possible.
You might also want to look at a widget library if you'd like to get more of this kind of low-level form handling stuff for free. Haven't tried the ones built on top of Prototype; other possibilities include YUI's one.
Updating the model from the server can be pretty simple. Generally you'd poll an AJAX request and have the server pass back either diffs, if it knows them, or else just timestamp each object update, send the new object details to the client side on each update, and have the client decide how to merge that with any changes the user has made in the meantime.