Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Most useful techniques for two way data binding with js

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 these services is becoming exceedingly popular. For a page of decent size with this kind of architecture, say a dashboard. What are the useful techniques of maintaining this client side state. In other words whats are some of the ways to do two way databinding? Sample scenario:

  1. Get Data From Service as JSON/XML
  2. Display/Bind on UI
  3. Capture User Input
  4. Recreate request from the UI controls/html
  5. Post Data To Service
  6. Get Response and Rebind
like image 579
Perpetualcoder Avatar asked Jan 08 '11 07:01

Perpetualcoder


3 Answers

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

like image 112
Meligy Avatar answered Sep 23 '22 21:09

Meligy


Angular is the most impressive player I've seen for two-way databinding. You can use plain old JavaScript objects, attach them to an Angular scope object, and then bind the scope to a section of the DOM. Here's an example for Angular 0.9. (Angular 1.0 uses a very different API to achieve the same thing.)

// angular.compile() returns a databinding function
var databind = angular.compile(document.documentElement);
var model = angular.scope();

// add data to the scope object
model.greeting = "Hello, World!";
model.colors = ["red", "green", "blue"];

// hook 'em up
databind(model);

You can use angular expressions in the HTML for databinding, including form controls.

<!DOCTYPE html>
<input name="greeting" />
<span ng:repeat="color in colors" style="color: {{color}}">
  {{color}}
</span>

In this case, the greeting property of the scope objects gets updated with every keystroke in the textbox.

Or if you don't want to use databinding expressions in your HTML, you can do everything manually.

model.$watch("greeting", function (value) {
  // when the greeting changes, update the DOM
  $("input[name=greeting]").val(value);
});

Then every time you update the scope object and call $eval(), if anything has changed, listeners will be notified.

model.greeting = "Hi.";
model.$eval();

And the best part is that you can make changes to anything attached to the scope, call its $eval() method, and the HTML automatically updates.

model.colors.append("yellow");
model.colors.sort();
model.$eval(); // notifies listeners, including bound HTML

Knockout JS is inferior because instead of working with plain JavaScript objects, arrays, strings, and numbers, you must create instances of its Observable and ObservableArray classes to do databinding.

Enjoy!

like image 23
Chris Calo Avatar answered Sep 24 '22 21:09

Chris Calo


I would take a look at Lava JS (http://lava.codeplex.com). It has very nice databinding and it is very unobtrusive to use. It also supports fetching/posting data to the server.

like image 36
xcopy Avatar answered Sep 21 '22 21:09

xcopy