Menu
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:
579
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).
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:
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
112
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!
23
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
