插件 jQuery.loadtemplate 中文 API 文档

插件 jQuery.loadtemplate 中文 API 文档 https://github.com/codepb/jquery-template

jQuery 的模板插件。允许模板化而不会使用标记混淆 JavaScript 代码。简单，简洁而强大

jQuery Template 是一个 jQuery 插件，可以轻松快速地使用模板。该插件支持将 HTML 文件作为模板加载，或者将 jQuery 对象作为模板（通常使用脚本标记来保存模板）。

特征

jQuery.LoadTemplate 提供以下内容：

定义模板以显示数据 提供格式化程序以将数据处理为更易读的格式 缓存模板和数据客户端，并将处理传递给客户端，从而提供出色的用户体验。 强大而简单的语法，利用纯 html 模板。

潜在的应用

jQuery.loadTemplate 最初设计时考虑了一个博客的单页应用程序。我们的想法是为博客帖子，帖子片段等创建模板。然后可以在需要时从客户端调用这些模板并进行缓存。发布数据作为 JSON 对象从服务器发送，并使用插件处理到模板中。这意味着服务器上的负载非常轻，具有出色的用户体验，页面过渡平滑，JavaScript 引擎完成所有工作。

但是我看到了许多其他潜在的应用程序。任何处理以常规格式显示的大量数据的应用程序，例如搜索结果，实时评论，博客，在线商店，社交媒体网站和列表都可以继续。

这个怎么运作

插件使用数据属性解析模板以填充数据。只需传入一个 JavaScript 对象，插件即可完成其余工作。

示例模板如下：

<script type="text/html" id="template">
    <div data-content="author"></div>
    <div data-content="date"></div>
    <img data-src="authorPicture" data-alt="author"/>
    <div data-content="post"></div>
</script>

要使用它，请执行以下操作：

$("#template-container").loadTemplate($("#template"),
	{
        author: 'Joe Bloggs',
        date: '25th May 2013',
        authorPicture: 'Authors/JoeBloggs.jpg',
        post: 'This is the contents of my post'
    });

类似地，模板的内容可以保存在单独的 html 文件中，而不包含封闭的脚本标记，并使用如下所示：

$("#template-container").loadTemplate("Templates/template.html",
	{
        author: 'Joe Bloggs',
        date: '25th May 2013',
        authorPicture: 'Authors/JoeBloggs.jpg',
        post: 'This is the contents of my post'
    });

该插件具有许多 data -… 属性，可用于使用数据填充各种属性。还有强大的 data-template-bind 属性，它接受 JSON 对象，允许绑定任何属性或元素的内容。

数组 您可以传递一个对象数组而不是一个对象，并且将填充模板并将其添加到数组中每个项目的容器中。内置了一些选项，允许您从数组中分页结果。请参阅下面的选项部分和包含的示例。

数据格式化程序

也可以定义数据格式化程序。这些是通过该 $.addTemplateFormatter 方法分配的。此函数接受函数映射和它们将被引用的键，或者单个函数将单个键作为两个单独的参数。每个格式化程序都有两个值，即分配的值，以及用于定义此数据显示方式的模板。data-format-options 可能为空。示例用法如下：

$.addTemplateFormatter("UpperCaseFormatter",
    function(value, template) {
        return value.toUpperCase();
    });

或者用地图：

$.addTemplateFormatter({
    UpperCaseFormatter : function(value, template) {
            return value.toUpperCase();
        },
    LowerCaseFormatter : function(value, template) {
            return value.toLowerCase();
        },
    SameCaseFormatter : function(value, template) {
            if(template == "upper") {
				return value.toUpperCase();
			} else {
				return value.toLowerCase();
			}
        }
});

要调用这些格式化程序，只需以下代码即可：

<div data-content="post" data-format="SameCaseFormatter"
	data-format-options="upper"></div>

必须在使用格式化程序之前添加它们，否则模板将无法访问它们。在填充数据时使用格式化程序。您还可以使用“data-format-target”定位任何绑定。这个值是绑定到目标，所以目标 data-alt 绑定，设置’data-format-target =“alt”’。

绑定

有许多不同的绑定和绑定数据的方法。可以使用以下属性：

• “data-innerHTML”（> = 1.4.5） - 绑定提供给元素内容（innerHTML）的值（使用 $（elem）.html（value））
• “data-content” - 较新“data-innerHTML”的别名
• “data-content-text” - 将提供给元素内容的值作为文本绑定（使用 $（elem）.text（value））
• “data-content-append” - 将值附加到元素的末尾（使用 $（elem）.append（value））
• “data-content-prepend” - 将值预先添加到元素的开头（使用 $（elem）.prepend（value））
• “data-id” - 将元素的 id 设置为提供的值（使用 $（elem）.attr（“id”，value））;
• “data-href” - 将元素的 href 值设置为提供的值（使用 $（elem）.attr（“href”，value））;
• “data-alt” - 将元素的 alt 值设置为提供的值（使用 $（elem）.attr（“alt”，value））;
• “data-value” - 将元素的 value 属性设置为提供的值（使用 $（elem）.val（value））
• “data-class” - 将元素的 class 属性设置为提供的值（使用 $（elem）.class（value））
• “data-css” - 将元素的 CSS 属性设置为提供的值（使用 $（elem）.css（value））
• “data-link” - 将元素的 innerHtml 设置为指向所提供值的链接（将内容包装在标记中）。
• “data-link-wrap” - 将元素包装在指向所提供值的链接中。与“data-link”相同，但标签包含元素以及内容。
• “data-options” - 为选择框添加选项。此值应引用一个字符串数组，每个选项将作为单独的选项输出。该值将与每个选项的显示文本相同。有关这个更强大的版本，请查看 data-template-bind 选项。

<div data-template-bind='[
     {"attribute": "content", "value": "post"},
     {"attribute": "data-date", "value": "date"},
     {"attribute": "data-author", "value": "author", "formatter": "sameCaseFormatter", "formatOptions": "upper"}]'></div>

$(container).loadTemplate(template, data, { append: true, elemPerPage: 20 });