jQuery模板技术和数据绑定实现代码

编辑：宝哥软件园来源：互联网时间：2021-10-23

新天龙八部

评分

好消息是微软开发了这样一个框架，它是jQuery的扩展。从现在开始，在浏览器上动态显示服务器端Web Service返回的数据将变得和用服务器端控件显示数据一样容易。这项技术被称为jQuery模板和数据链接，是微软对jQuery的扩展。这个扩展需要经过jQuery的正式审查，然后才能包含在jQuery中。根据ScottGu的博客，这一延期正在等待审查。但是这些功能都很强大，很实用，我先把它们转过来，偷偷看一下。编写AJAX应用程序时，经常需要使用JavaScript在页面上显示数据。jQuery模板和数据链接提供了一种在HTML页面上显示JavaScript数据的便捷方式，数据可以呈现为各种元素，如普通文本、TextBox、list等。数据链接这个词的直译应该是数据链接，但我认为数据绑定这个词更能体现这项技术的能力，符合ASP。NET的成语。斯科特格思里也在他的博客中这样说。最初，他们也想把这项技术称为数据绑定，而不是数据链接。然而，由于术语绑定已经存在于jQuery中，它指的是其他东西，为了不引起混淆，他们不得不给它起了另一个名字，叫做数据链接。有时间我会把这个博客翻过来翻译一下。以下全文引自ScottGu的博客。

jQuery Templates and Data Linking (and Microsoft contributing to jQuery)

jQuery库有一个充满激情的开发人员社区，它现在是当今网络上使用最广泛的Java Script语言库。两年前，我宣布微软将开始为框架提供产品支持，未来我们将把它包括在可视化工作室的新版本中。默认情况下，当您使用VS 2010创建新的ASP.NET网络表单和ASP.NET最有价值球员项目时，您会发现框架会自动添加到您的项目中。几周前，我在MIX 2010大会上的第二次主题演讲中宣布，微软也将开始为框架项目做出贡献。在谈话中，约翰瑞西——jQuery库的创建者和框架开发团队的领导者——谈到了我们的参与，并讨论了框架新客户端模板应用编程接口的早期原型。在这篇博文中，我将简单介绍一下我的团队是如何开始为框架项目做出贡献的，并讨论一些我们正在研究的特定特性，例如客户端模板和数据链接（数据绑定)。

Contributing to jQuery

jQuery有一个非常棒的开发人员社区，并且有一个非常开放的方式来提出建议和做出贡献。微软和社区中的其他成员一样，遵循同样的流程来为框架做出贡献。例如，当与框架社区合作改进对框架模板化的支持时，我的团队遵循了以下步骤：我们创建了一个模板化提案，并将该提案发布到框架开发者论坛(http://forum.jquery.com/topic/jquery-templates-proposal和http://forum . jquery.com/topic/templating-语法).在论坛上收到反馈后，jQuery团队创建了一个模板原型，并将该原型发布到开源代码库代码存储库(http://github.com/jquery/jquery-tmpl).我们迭代了原型，在模板原型的开源代码库上创建了一个新的分叉，以提出设计改进建议。社区的其他几个成员也通过分叉模板代码提供了设计反馈jQuery .社区对最初的模板提案(jQuery论坛上有超过100篇帖子)做出了惊人的响应，模板提案的设计在社区反馈的基础上有了显著的发展jQuery .团队是模板化提案的最终决定者——他们可能会将它包含在框架核心中，或者将其作为官方插件，或者完全拒绝它。我的团队很高兴能够参与开源过程，并像社区中的任何其他成员一样提出建议和贡献。

jQuery Template Support

客户端模板使框架开发人员能够在客户端轻松生成和呈现HTML用户界面.模板支持一种简单的语法，使开发人员或设计人员能够声明性地指定他们想要生成的超文本标记语言.然后，开发人员可以在客户端以编程方式调用模板，并将Java Script语言对象传递给它们，以使呈现的内容完全由数据驱动。这些Java Script语言对象可以选择性地基于从服务器检索的数据。因为框架模板提议仍在响应社区反馈而发展，最终版本可能看起来与下面的版本非常不同。这篇博文让你对如何尝试和使用现有的模板有了一个概念（你可以从http://github.com/jquery/jquery-tmpl的框架核心团队下载原型，或者从我的团队下载最新的提交，网址是http://github。com/nje/jQuery-tmpl).框架客户端模板您可以通过在脚本类型=“文本/html”标记中嵌入内容来创建客户端框架模板。例如，下面的超文本标记语言包含一个差异模板容器，以及一个客户端jQuery“联系人模板”模板（在脚本类型="文本/HTML "元素中),可用于动态显示联系人列表：

上面的联系人模板中使用了{{=name }}和{{=phone }}表达式来显示传递给模板的"联系人"对象的姓名和电话号码。我们可以使用模板来显示一个Java Script语言对象数组或者一个对象。下面的Java Script语言代码演示了如何使用上面的模板来呈现“联系人”对象的Java Script语言数组渲染()方法将数据呈现为字符串，并将该字符串追加到“联系人容器”DIV元素：中

加载页面时，联系人列表由模板呈现。所有这些模板渲染都发生在浏览器：的客户端

模板命令和条件显示逻辑当前的模板建议支持一小组模板命令——包括如果、否则和每个语句。模板命令的数量被有意地保持很少，以鼓励人们将更复杂的逻辑放在模板之外。尽管如此，即使是这一小组模板命令也非常有用。例如，假设每个联系人可以有零个或多个电话号码。联系人可以用下面的Java Script语言数组来表示

下面的模板演示了如何使用如果和每个模板命令有条件地显示和循环每个联系人的电话号码：

如果一个联系人有一个或多个电话号码，那么每个电话号码都是通过用每个模板命令：遍历电话号码来显示的

框架团队设计了模板命令，以便它们是可扩展的。如果您需要一个新的模板命令，那么您可以轻松地将新的模板命令添加到默认命令集

Support for Client Data-Linking

ASP。网团队最近向框架论坛提交了另一个提案和原型。该提案描述了一个名为数据链接的新功能。数据链接使您能够将一个对象的属性链接到另一个对象的属性，这样当一个属性发生变化时，另一个属性也会发生变化。数据链接使您能够轻松地在页面内保持用户界面和数据对象的同步。如果您熟悉数据绑定的概念，那么您将熟悉数据链接（在提案中，我们称之为特征数据链接，因为框架已经包含了一个与数据绑定无关的绑定()方法)。例如，假设您有一个页面，其中包含以下超文本标记语言输入元素：

下面的Java Script语言代码将上面的两个投入元素链接到一个JavaScript“联系人”对象的属性，该对象具有“姓名”和“电话”属性：

执行此代码时，第一个投入元素(#名称)的值被设置为联系人姓名属性的值，第二个投入元素(#电话)的值被设置为联系人电话属性的值。联系人对象的属性和投入元素的属性也是链接的，因此对其中一个的更改也会反映在另一个中。因为联系人对象链接到投入元素，所以当您请求页面时，联系人属性的值显示为：

更有趣的是，每当您更新链接到的联系人对象的属性时，链接的投入元素的值会自动更改。例如，我们可以使用类似于低于：的jQuery attr()方法以编程方式修改“联系人”对象的属性

因为我们的两个投入元素链接到了“联系人”对象，输入元素的值会自动更新（不需要我们编写任何代码来修改用户界面元素):

注意，我们使用jQuery attr()方法更新了上面的接触对象。为了使数据链接起作用，必须使用框架方法来修改属性值。双向链接链接两者()方法支持双向数据链接。接触对象和输入元素在两个方向上链接。当您修改投入元素的值时，联系人对象也会自动更新。例如，下面的代码向一个超文本标记语言按钮元素添加了一个客户端Java Script语言点击处理程序。当您单击按钮时，将使用alert()对话框：显示联系人对象的属性值

下面演示了当您更改名称输入元素的值并单击保存按钮时会发生什么。请注意，输入元素链接到的“联系人”对象的名字属性已自动更新：

上面的例子显然非常简单。您可以想象调用网服务将对象保存到数据库中，而不是用Java Script语言警报显示接触对象的新值。数据链接的好处是，它使您能够专注于您的数据，并从保持用户界面和数据同步的机制中解放出来。转换器当前的数据链接方案还支持一种称为转换器的功能。转换器使您能够在数据链接过程中轻松转换属性值。例如，假设您想用“联系人”对象电话属性以标准方式表示电话号码。特别是，您不想在电话号码中包含特殊字符，如()。相反，您只需要数字，不需要其他任何东西。在这种情况下，您可以连接一个转换器，使用下面的代码：将投入元素的值转换成这种格式

请注意上面如何将一个转换器函数传递给链接自()方法，该方法用于将“联系人”对象的电话属性与电话输入元素的值进行链接。在更新电话属性之前，此转换器功能会从投入元素中删除任何非数字字符。现在，如果您在电话输入字段中输入电话号码(206) 555-9999,则值2065559999将被分配给联系人对象：的电话属性

您也可以在相反的方向使用转换器。例如，在显示电话属性中的电话号码时，可以应用标准的电话格式字符串。

Combining Templating and Data Linking

我们提交这两个关于模板和数据链接的建议的目的是为了在使用框架构建网站和应用程序时，更容易处理数据。模板化使得显示通过埃阿斯调用从数据库中检索的数据库记录列表变得更加容易。数据链接使得在更新场景中保持数据和用户界面同步变得更加容易。目前，我们正在对数据链接提议进行扩展，以支持声明性数据链接。我们希望在使用模板显示数据时，能够轻松利用数据链接。例如，假设您正在使用以下模板来显示产品对象：

的数组

请注意{ {链接名称}}和{ {链接价格}}表达式。这些表达式支持产品对象的跨度元素和属性之间的声明性数据链接。当前的框架模板原型支持用自定义模板命令扩展其语法。在这种情况下，我们使用名为“链接”的自定义模板命令来扩展默认模板语法。使用与上述模板链接的数据的好处是，每当底层"产品"数据更新时，SPAN元素将自动更新。声明性数据链接还使创建、编辑和插入表单变得更加容易。例如，您可以通过使用像这样的声明性数据链接来创建用于编辑产品的表单：

每当您在使用声明性数据链接的模板中更改投入元素的值时，底层的Java Script语言数据对象都会自动更新。您可以直接处理底层数据，而不需要编写代码来抓取超文本标记语言表单以获取更新的值，这使得您的客户端代码更加简洁明了。

Downloading Working Code Examples of the Above Scenarios

你可以下载这个。上述场景的工作代码示例。那个拉链.文件包括四个静态超文本标记语言页面：清单1 _模板。htm说明了基本的模板清单2 _ templatingconditionals。htm用如果和每个模板命令说明模板化清单3 _数据链接。htm说明数据链接清单4 _转换器。htm说明如何使用带有数据链接的转换器。您可以将文件解压缩到文件系统中，然后运行每个页面来查看正在运行的概念。