使用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 >  19: });