JQuery: Is there a way to do Flex-style data bindings?

Question

Several new UI/Query frameworks allow you to "bind" UI elements to data structures. When data in the structure is updated, the change propagates to the UI element, automatically. Some examples of this include the [Bindable] tag in Adobe Flex, and the "Bindable LINQ" extension for .NET .

Is anyone doing this in JQuery?

Answer 1

It may not be that straightforward to do in straight JavaScript. You have to intercept setters for the bound properties, which is possible to do in those other environments because setters are part of the language in both .NET and ActionScript, but not part of JavaScript itself. Both .NET and AS3 have special setter syntax which the compiler understands; in JS it's just

instance.property = value // or instance[property] = value for dynamic assignment

Answer 2

Not jQuery specific, but MS AJAX.NET 4.0 has an implementation to bind vanilla JavaScript objects (POJOs) to vanilla DOM elements, including two-way binding. It's all driven by an implementation of the Observer pattern on POJOs for observing an object for changes on any of its properties:

var widget = { name: "widget1" }; // came from a JSON service

Sys.Observer.addPropertyChanged(widget, showWidget);

showWidget(widget);

function showWidget(widget) {
    $get('div1').innerHTML = widget.name;
}