Exclusive updates on:

Data Link – A Data-Binding for jQuery

by Jonathan Allen on Oct 08, 2010 |

The second of the three jQuery libraries by Microsoft adds support for two-way data binding. While it serves the same purpose, the implementation is very different than what you would see in WPF or Silverlight.

Data Link relies on a single method, link, to tie together input elements on a form and the target object. Much like setting a DataContext in XAML, link is called on the form itself. By default, this creates a two-way binding between every named input element and the matching fields on the object. However, there are many options available.

Instead of binding every element, developers can pass in a dictionary in the form of “{fieldName: "elementName", …}”. This will restrict the data binding to only the indicated pairs. For any specific element, one can also specify “twoWay: false” to prevent changes to an object from being propagated back to the input element.

Value converters are exposed much like the twoWay property, with the names “convert” and “convertBack”. Unlike XAML, you have the option of either passing in a function or defining the converter inline as an anonymous function. If other fields need to be changed as a result of changes to the bound field, it can be done via the converter method.

The jQuery Data Link API requires jQuery 1.4.3, which has not been released yet. You can get both jQuery 1.4.3 and jQuery Data Link from github. jQuery Data Link is licensed under both the MIT and GPL Version 2 licenses.