使用Sharepoint列表数据的jQuery模板

[原文发表地址]Using jQuery Templates with SharePoint List Data

[原文发表时间] 2011-06-30 02:32 PM

jQuery库新的jQuery模板插件提供了一种方法在客户端代码中创建数据驱动的HTML。这个概念同ASP.NET 模板中的一个理念很类似，即仅在客户端上而不是在服务器上进行实现。jQuery模板是一个HTMl的代码片段，其中包含了标识绑定数据中字段的占位符。当模板在页面上呈现时，模板插件会遍历数据，并在占位符指示的地方插入字符段值。

如果想看入门文章，请参见 jQuery 模板介绍. 如果想了解API文档和示例代码，请参见

jQuery 网站上的模板。

无论是jQuery，还是模板插件，都是强大的能在 Sharepoint上创建用户界面的客户端工具。在这篇博客中，我会引导大家完成一个短小的范例，这个范例由JavaScript编写的，并部署在一个 简单的编辑器上。我的这个范例可能和这些工具能做的事没有多少关系，但是会告诉你这些工具的操作方法。

准备

为了演示范例，我在sharepoint2010 的开发实例中用联系人列表模板创建了一个名为联系人的列表。同时，我创建了一个新的Web Part Page，并把它添加到了网站的页面库。在页面上的一列中我插入了一个Content Editor Web Part（CEWP）。

与其艰难地使用CEWP编辑器，我更倾向于利用Content Link指向已上传到Site Assets 库中的内容文件。我的Site Assets 库有个名为JavaScript的文件夹。文件夹创建者/主人拥有完全控制权限，其他人也有读取权限。此文件夹位于我上传文件及Content Link指向的地方。

链接到jQuery库和模板插件

在使用模板插件前，您的网页需要一个脚本引用来加载jQuery库。此外，模板插件的Beta版要求您的网页需要将插件作为单独的文件引用。插件代码最终将与jQuery库合并，而您将只需要链接到一个文件。而现在，你的页面需要两个脚本的引用。

我的开发网站有网络连接，所以我用下面的标记链接到Microsoft Ajax Content Delivery Network上的jQuery库。

   1: <!-- Link to the jQuery library -->

   2: <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js" type="text/javascript"></script>

   3: <!-- Link to the Templates plugin --> 

   4: <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>   

如果你不喜欢链接到外部源，你可以下载库，并通过上传到Site Assets或创建一个带有模块（作为共享资源库）的Sharepoint功能来把jQuery库布署到SharePoint上。

jQuery模板如何工作（简短版）

jQuery模板是嵌有模板标签的HTML代码片段。它们类似于.NET Framework中可向String.Format传递方法的模板。例如，你可以编写下面的C#代码：

   1: string template = "It was {0} degrees in {1} on {2).";

   2:  string output = string.Format(template, 54, "Seattle", DateTime.Now.DayOfWeek);

在该代码中，格式字符串中定义的嵌入变量作为可替代的占位符在运行时得到填补。类似的jQuery可以是这样的：

   1: <script id="weatherTemplate" type="text/x-jquery-tmpl"> 

   2:   1: 

   3:   2:    <li>It was ${ Degrees } degrees in ${ City } on ${ DayOfWeek }.</li>  

   4:   3:  

   5: </script>

这种特殊的jQuery模板是为了呈现以下数据而设计的：

   1: var weatherData = [

   2: { City: "Seattle", Degrees: 54, DayOfWeek: "Monday" },

   3: { City: "San Francisco", Degrees: 64, DayOfWeek: "Monday" },

   4: { City: "Los Angeles", Degrees: 84, DayOfWeek: "Monday" }

   5: ];

你可以通过在脚本标签中放置一个HTML的代码片段来创建一个 jQuery模板。这个脚本标签的类型属性设置为"text/x-x-jquery-tmpl"。此范例模板使用许多${ }标记作为当前数据项的字段名的占位符。呈现模板时，HTML代码段的副本会与数据集当中的每一项进行匹配，并对特定值进行填充。其他一些具有更复杂逻辑 关系的标签也可用。有关完整列表，请参见模板标签。

除了定义一个模板，你还必须在DOM中标识一个元素，使jQuery显示输出。例如，您可以指示jQuery从天气预报模板向以下元素定义的列表中追加输出：

   1: <ul id="weatherContainer></ul>

好了，你拥有了数据，设置数据格式的模板和接收输出的HTML元素。现在剩下的就是通过调用jQuery 模板插件，编写JavaScript脚本，并指示它使用模板在输出容器中呈现数据。你可以用一个单独的jQuery链来做：

   1: $("#weatherTemplate").tmpl(weatherData).appendTo("#weatherContainer");

jQuery模板怎样作用于Sharepoint

SharePoint网站上最有趣的数据可以在列表项的字段中找 到。例如，假设你在编写一个可以从联系人列表重新设置数据格式的Web Part。在这个假设的例子中，你想要做的是呈现一个包含联系人信息缩写的列表，并且你希望联系人按公司排序。假设你想要类似图1的输出。

图1: 精简的联系列表

要创建列表，你可以定义一个如下的输出容器和jQuery模板：

   1: <p><strong>${ Company }</strong><br/>

   2: ${ FirstName } ${ LastName } 

   3: {{if BusinessPhone}}

   4: | ${ BusinessPhone } 

   5: {{/if}}

   6: {{if EMailAddress }}

   7: | <a href="mailto:${ EMailAddress }">${ EMailAddress }</a> 

   8: {{/if}}

   9: </p>

模板中前面三个占位符是${}标记，这个简明易懂，在联系列表项中指定字符段。BusinessPhone和EMailAddress数据的格式由{{if}}标签进行了包装，指定了显示的条件，因为这些都不是列表必需的字符段。这些字符段在有些项中可能不包含任何数据。

为了获取数据来填充模板，你要做的全部工作就是调用jQuery库的Ajax简要方法jQuery.getJSON()。这个方法接受某个服务的URL，这个服务提供作用于数据上的数据和回调函数。

对于服务，我们可以使用SharePoint Foundation REST Interface提供的列表服务。例如，获取联系人列表的JSON数据，并要求数据按照公司名称排顺，我们可以使用下面相对URL：

"../_vti_bin/ListData.svc/Contacts?$orderby=Company"

而且，对于响应，我们想做的仅仅是呈现模板中的数据。我们可以传递一个回调的字面函数。它所做的无非是把模板绑定到数据，并把输出追加到容器。

   1: $(document).ready(function () {

   2: // Get the list data.

   3: $.getJSON(

   4: '../_vti_bin/ListData.svc/Contacts?$orderby=Company', 

   5: function(data) {

   6: $('#contactTemplate') // Select the template. 

   7: .tmpl(data.d.results) // Bind it to the data. 

   8: .appendTo('#contactsContainer'); // Render the output.

   9: }

  10: );

  11: });

完整的代码和标记

以下是完整的代码和标记，我把这些代码和标记上传到Site Assets 库并链接到一个Content Editor Web Part，以得到图1所示的输出：

   1: <p><strong>${ Company }</strong><br/>

   2: ${ FirstName } ${ LastName } 

   3: {{if BusinessPhone}}

   4: | ${ BusinessPhone } 

   5: {{/if}}

   6: {{if EMailAddress }}

   7: {{/if}}

   8: </p>

   9: $(document).ready(function () {

  10: // Get the list data.

  11: $.getJSON(

  12: '../_vti_bin/ListData.svc/Contacts?$orderby=Company', 

  13: function(data) {

  14: $('#contactTemplate') // Select the template. 

  15: .tmpl(data.d.results) // Bind it to the data. 

  16: .appendTo('#contactsContainer'); // Render the output.

  17: }

  18: );

  19: });