Templates are cool and useful as a way of easily generating dynamic content in a page. But they are one-way only: You can bind the data to the template for display, but there is no support to let the user update the data and automatically update the underlying JavaScript objects. That's where data linking comes in, implemented in the jQuery Data Link plug-in developed by Microsoft's ASP.NET and jQuery teams. Data linking provides a way to link a property of one object to a property of another object. Once linked, updating the linked property on either object automatically updates the property on the other object. The most common use for data linking is to link the properties of a JavaScript object to form fields on a page.
This data linking behavior is more commonly called binding, but since there is already a jQuery bind method, the team decided to call it data linking instead. The jQuery bind method binds events to objects, not data.
If the names of the properties of the two objects are the same, such as if a form's input elements have name attributes with values that are the same as the object you want to link to, data linking can automatically set up all the links for you. Or you can specify a mapping between the two objects' properties, whatever works best for you. The plug-in also supports converters, letting you define a function that automatically performs conversion or formatting when you need to modify the property value as it is updated on the other object. There is a lot of flexibility built into the Data Link plug-in.
The plug-in consists of two primary methods: link and unlink. As their names imply, the link method creates a link between object properties and unlink breaks the link. You won't often have to use unlink, because the plug-in cleans up a link when either its target or source object is a DOM element that is going out of memory, such as when its parent object is cleared.
If you've done a lot of data binding with ASP.NET and other parts of the .NET Framework, this might all sound pretty familiar. And it kind of works the same, to a limit. But there is one huge difference, at least in the current development version of the Data Link plug-in. The difference is that the linking isn't activated immediately once you call the link method when binding an object to a form or input elements. Instead, it is activated by the DOM change event, and that event is triggered when the input control loses the focus and its contents have been changed since it last had the focus. Most of the time this won't be a huge issue, but you will need to make allowance for this behavior in how you use and code data links.
How all this works in the final release is anybody's guess at this point though. It will take some time for Microsoft's proposal to gain the acceptance of the jQuery community and get approval, and until then the plug-in is a moving target.
Exploring the Plug-in
To explore data linking, I adapted the Contacts.html sample page from the reference sample used by the Data Link team to demonstrate how data linking works at any given point. When you first view this page in a browser, you'll see the page shown in Figure 1.
Figure 1: Contacts.html sample web page
It is a simple application for maintaining a set of contacts, letting you add new contacts and sort them. You can add as many contacts and phone numbers as you like. The one kind of weird feature is the age bar in the right column: its width corresponds to the age of the person, presumably so that you can quickly and easily find your oldest and youngest contacts!
The Save contacts button displays the current data contained in the contacts variable, as JSON. Figure 2 shows the data displayed on the page immediately after loading the page, before making any changes to the contact data. This provides a handy way to see the current state of the data.
Figure 2: Data displayed on Contacts.html page
The HTML in the body of the page is fairly simple, shown below. The table will display the contacts and let the user make changes. The results <pre> element displays the JSON data when you click the Save contacts button.
<h1>My Contacts - Data Link</h1>
<table class="contacts"></table>
<input type="button" id="insert" value="Insert new contact" />
<input type="button" id="sort" value="Sort by Last Name" />
<input type="button" id="save" value="Save contacts" />
<pre id="results"></pre>