jQuery数据链接对象和对象之间的属性关联

2010年10月10日，ASP.NET团队最近还向jQuery社区提交了一项名为“数据链接”的技术。数据链接可以帮助您实现对象之间的属性关联。方便实现页面中显示的数据与实际数据对象中的数据实时同步。数据链接和数据绑定的理论非常相似(我们使用数据链接这个名称是因为jQuery已经包含bing()方法，尽管这个方法与数据绑定无关.).现在让我们看看如何使用数据链接。假设有一个页面有两个输入元素，如下所示：。

然后，我们通过以下Javascript代码将这两个INPUT元素与一个名为“contact”的Javascript对象的相应属性相关联：。

执行此代码时，联系人对象的名称属性值将用作第一个输入元素的值。同样，属性phone的值被支付给id为phone的第二个Input元素。以这种方式，建立了联系对象的属性和输入元素之间的映射关系。在本例中，因为contact对象的属性绑定到Input元素，所以当您访问页面时，contact属性的值将显示在两个文本框中：。

并且当联系人对象的属性值改变时，绑定到该属性的Input元素中的值将自动改变。这样我们就可以通过编程的方式修改contact对象的属性值，比如在jQuery中使用attr()方法，如下所示：。

这样，关联的Input元素中的值将自动更新(我们不需要在这里做任何事情):。

请注意，就像我们在上面的jQuery中使用attr()方法一样，我们更新了contact对象的属性值。为了保证数据链接的正常运行，必须使用jQuery中的方法来修改属性值。双向绑定上面实现了从Javascript对象到HTML元素的单向数据绑定。要实现双向数据绑定，需要使用linkBoth()方法。例如，下面的代码向按钮元素添加了一个客户端Javascript点击处理事件。点击按钮后，弹出警告窗口，窗口中显示联系人对象的属性值：。

下面显示了修改页面上“名称”输入框中的值并单击保存按钮后的情况。请注意，输入框和联系人对象中的相应属性值已经更改：。

以上只是一个简单的演示，使用Javascript警告弹出来显示联系人对象的属性值。想象一下，我们也可以调用一个web服务来将对象保存到数据库中。这样做的好处是，它允许您专注于您的数据，而不用担心如何保持它与用户界面显示的同步。在数据链接中，我们还支持名为转换器的功能。在连接属性值时，转换器可以轻松转换数据。假设我们希望联系人对象的phone属性的值输出为纯数字(不包括“-”或“()”)。在这种情况下，我们可以构建一个转换器，将Input元素中的值转换为我们想要显示的样式：。

注意上面的转换器如何转换绑定双方的值，并将它们传递给linkFrom()方法。将输入元素中的值与联系人对象的电话属性同步时，转换器会自动过滤掉数字以外的字符。也就是说，如果在页面的phone输入框中输入(206)555-9999，则与联系人对象同步的Phone属性中的值将为206555999: 。

上面的演示是去掉格式，当然也可以反向使用转换器。例如，以电话号码的格式定义一个字符串，格式化属性值并显示它。00-1010，我们希望通过采用Templating和Data Linking技术，开发人员可以更方便地使用jQuery开发涉及数据显示和处理的网站项目。模板化可以方便地将ajax异步方式得到的数据记录以预期的方式显示出来，而数据链接则为我们解决了页面显示和对象属性之间的数据同步和更新问题。目前，我们正在尝试实现数据链接技术的扩展，以支持声明性数据链接。让大家在使用模板技术展示数据的时候，可以更轻松的使用数据链接，从而达到更好的开发体验。例如，我们使用以下模板来显示产品对象的数组：。

请注意表达式{{link name}}和{{link price}}，它们将SPAN标记与产品对象的属性相关联。目前，jQuert模板允许用户使用自定义命令来扩展模板附带的数据同步方法。这里，我们使用一种称为“链接”的方法来扩展模板的默认数据同步功能。在上述模板中使用数据链接带来的好处是，当“产品”对象的数据发生变化时，页面上SPAN选项卡显示的内容会自动同步显示。声明性数据连接也使我们更容易创建、编辑和插入表单。例如，使用声明性数据连接，您可以创建一个表单，以下列方式编辑“product”对象。

当您使用模板技术和数据链接来声明关联时，当您修改页面Input元素中的值时，与该元素关联的Javascript对象的属性将同步更改。这为我们省去了手动编写代码来同步对象和数据显示的麻烦，这也有助于我们编写更简洁的客户端代码。