Connexion d'un formulaire à un objet Javascript (et autre conseil sur les meilleures pratiques)

Question

J'utilise javascript pour faire des fonctionnalités légères sur des sites depuis des années - manipulation DOM etc - mais je commence tout juste à l'utiliser pour en faire beaucoup plus de la lourde levée (en combo avec PHP). Je viens juste de commencer à entrer dans OO JS, et j'essaie toujours de comprendre les meilleures pratiques et les modèles de design qui fonctionnent bien avec. Pour être plus précis - ma question est, quelqu'un peut-il suggérer ici des techniques pour connecter un formulaire à un objet JavaScript?

Dans mon implémentation actuelle, j'ai un objet JS qui peut être édité par un formulaire (assez grand). Lorsque j'instancie l'objet, j'attache un observateur onchange au formulaire, dont le rappel synchronise les champs du formulaire avec les paramètres de l'objet. Je gère le formulaire de soumission via AJAX - il existe également une requête périodique qui enregistre une version temporaire de l'information de formulaire dans une base de données mySQL. Une chose que je me demande est de savoir s'il est possible de gérer facilement la synchronisation dans l'autre sens - onchange de l'objet que les champs de formulaire mettent à jour (sur le formulaire de réinitialisation par exemple).

Je suis curieux de savoir si cette approche est correcte/sensée, et plus généralement je serais très intéressé d'entendre des conseils en ce qui concerne la gestion des formulaires OOJS.

Vive à l'avance :)

(Im en utilisant Prototype BTW)

Answer 1

Pourquoi ne pas créer une méthode en vous opposez qui resynchronise l'objet avec la forme? Et appelez cela à chaque changement de l'objet? Vous pouvez créer une fonction de changement spéciale pour vous assurer qu'elle est appelée à chaque changement.

Answer 2

C'est une approche parfaitement raisonnable. JS n'encourage pas entièrement ce genre de chose à cause de son curieux système d'objets et en particulier la façon dont les méthodes liées ne sont pas des objets de première classe, mais avec un peu de métaclasse et de callback appropriés, c'est éminemment possible.

Vous pouvez également consulter une bibliothèque de widgets si vous souhaitez obtenir davantage de ce type de manipulation de formulaire de bas niveau gratuitement. N'ont pas essayé ceux construits sur Prototype; d'autres possibilités incluent celle de YUI.

La mise à jour du modèle à partir du serveur peut être très simple. En règle générale, vous interrogez une requête AJAX et demandez au serveur de faire défiler les diffs, si elle les connaît, ou bien horodatez chaque mise à jour d'objet, envoyez les nouveaux détails au client à chaque mise à jour et demandez au client de décider fusionner avec tous les changements que l'utilisateur a fait entre-temps.

Answer 3

Vous pouvez utiliser $("form").serialize(true);

http://www.prototypejs.org/api/form/serialize

Vous ne avez pas besoin de l'événement onchange, il vous suffit d'appeler la méthode serialize() chaque fois que vous avez besoin pour obtenir les données de formulaire.