The FormBuilder is essentially a GUI form building tool, allowing users to drag-and-drop form elements into a form container, arrange them into pages and sections as needed, and of course enter settings like label, validation and defaults. Because it is a single-page application, jQuery is an essential component in creating building out the interface. Ajax queries call the ColdFusion back-end for field templates and data beans, and the data in these beans has to be mapped to the forms used to populate/update them.
To begin with, we have a FieldBean, who's "remote" data looks something like below (abbreviated):
Because there are many fields, and the data isn't saved to the server individually (the entire form is updated at once), and because the forms that manage each field are only templates, I needed a way to both load the current data values into the form, and then update that data as form values are changed (essentially an initial data assignment to the appropriate field, then a 'bind' so that changes to the form are immediately reflected in the data object).
To accomplish this, I first used the new HTML5 "data" attribute to create a bind key in the form fields (in this case, "data-bind"):
The value of "data-bind" is usually the same as the field name, but I wanted to not only keep this flexible, but also create a very unique key for my jQuery selectors. To accomplish this, I first select all of my fields in the form, then using the jQuery $.each() function I loop over them and activate the bindings.
This function both populates the form with the current data in the data object and maintains a connection to the object through keyup, click and change jQuery events.
I should also mention that the Meld FormBuilder application is being built upon Ben Nadel's new (but slick) corMVC jQuery framework. This really strikes me as a sort of "FW/1 for jQuery" in that it is simple and doesn't muddy the waters with a bunch of complicated functionality. My version is admittedly a bastardization of his framework (I prefer using straight binding to load views rather than his 'url listener' methodology) but it is an excellent place to start for anybody building an even moderately complicated jQuery single-page/multi-view application.