Most useful techniques for two way data binding with js

后端未结

关注

 3  1300

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

相关标签:

3条回答

佛祖请我去吃肉

2021-02-10 08:07

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
误落风尘

2021-02-10 08:28
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
0 讨论(0)
发布评论:

提交评论
- 加载中...
北恋

2021-02-10 08:29
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!
0 讨论(0)
发布评论:

提交评论
- 加载中...