Most useful techniques for two way data binding with js

Question

With abundance of web services and client side templating features of jQuery and likes, creating mashups or sites consuming a multitude of web services and posting data back to

Answer 1

In jQuery you can easily do AJAX request of page load that calls the service, returns an object, and bind that object to the form using jQuery Templates plugin. When the form needs to be submitted, you can use jQuery Form plugin to send to the service via AJAX and return the JSON object, bind it to the jQuery Templates plugin container (the form).

• jQuery AJAX API
  http://api.jquery.com/jQuery.ajax/
• jQuery Templates Plugin
  http://plugins.jquery.com/project/jquerytemplate
  http://api.jquery.com/category/plugins/templates/
• jQuery Form Plugin
  http://jquery.malsup.com/form/

---

also, You may combine the use of jQuery "Form" plugin to send the form, and the KnockOut JavaScript library, which is all about the kind of binding you want to do.

See knockout JS library details on http://knockoutjs.com/

The first two features as listed there are:

• Declerative Bindings
• Automatic UI Refresh

See this live example for very small introduction http://knockoutjs.com/examples/helloWorld.html

---

Update:

Since this answer got a recent upvote, it's also important to mention the relatively-new kid in the town, angularJS, it's a bit of a bigger framework that can do so many things, but doing two-way data-binding is the easiest thing ever.

Official URL: http://angularjs.org

Example: http://docs.angularjs.org/guide/forms

http://gurustop.net