The ASP.NET team recently submitted another proposal and
prototype to the jQuery forums (http://forum.jquery.com/topic/proposal-for-adding-data-linking-to-jquery).
This proposal describes a new feature named data linking. Data Linking enables
you to link a property of one object to a property of another object - so that
when one property changes the other property changes. Data linking
enables you to easily keep your UI and data objects synchronized within a page.
If you are familiar with the concept of data-binding then
you will be familiar with data linking (in the proposal, we call the feature
data linking because jQuery already includes a bind() method that has nothing
to do with data-binding).
Imagine, for example, that you have a page with the
following HTML <input> elements:
The following JavaScript code links the two INPUT elements
above to the properties of a JavaScript “contact” object that has a “name” and
“phone” property:
When you execute this code, the value of the first INPUT
element (#name) is set to the value of the contact name property, and the value
of the second INPUT element (#phone) is set to the value of the contact phone
property. The properties of the contact object and the properties of the INPUT
elements are also linked – so that changes to one are also reflected in the
other.
Because the contact object is linked to the INPUT element,
when you request the page, the values of the contact properties are displayed:
More interesting, the values of the linked INPUT elements
will change automatically whenever you update the properties of the contact
object they are linked to.
For example, we could programmatically modify the properties
of the “contact” object using the jQuery attr() method like below:
Because our two INPUT elements are linked to the “contact”
object, the INPUT element values will be updated automatically (without us
having to write any code to modify the UI elements):
Note that we updated the contact object above using the
jQuery attr() method. In order for data linking to work, you must use jQuery
methods to modify the property values.
