阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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 选项。

      除上述属性外,还有一个“data-template-bind”属性。这旨在处理更复杂的情况,并允许广泛的控制。该属性采用 JSON 字符串,并允许在 one 属性中设置多个绑定和选项。

      “data-template-bind”值应该是一个对象数组。每个对象代表一个完整的绑定。每个对象都可以包含以下属性:

      • “value”(必需) - 表示要绑定的值的属性。
      • “attribute”(必需) - 要绑定的属性。这可以是 jQuery.attr()方法或以下之一接受的任何属性:“content” - 与 data-content 相同,绑定 innerHTML,“contentAppend” - 与 data-append 相同,追加值,“contentPrepend “ - 与数据前置相同,前置值,”选项“ - 与数据选项相同,但提供更好的控制。value 属性是一个具有 value 属性和 content 属性的对象,这将把 option 的值绑定到 value 属性,将 option 的 innerText 绑定到 content 属性。
      • “formatter”(可选) - 提供应用于特定绑定的格式化程序。多个不同的属性可以使用此语法使用不同的格式化程序
      • “formatOptions”(可选) - 传递给应用的格式化程序的选项。 使用“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>
      

      选项

      插件接受了许多选项。这些可以通过将包含您要设置为第三个参数的设置的对象传递给。loadTemplate 来设置:

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

      完整的选项列表如下:

      • “overwriteCache”(默认为 false) - 是否忽略缓存并重新加载模板(如果您以前加载了模板,但它可能已更改,则您需要将其设置为 true。
      • “async”(默认为 true) - 是否异步加载模板(如果模板需要 Ajax 调用)
      • “complete”(默认为 null) - 调用完成时的回调函数。无论成功与否,都将永远被召唤。
      • “success”(默认为 null) - 成功完成时调用的回调函数。
      • “error”(默认情况下,将错误消息输出到模板容器) - 调用错误时的回调函数。
      • “errorMessage”(默认“加载模板时出错。”) - 要使用的默认错误回调的错误消息。如果设置错误回调函数,则不会使用此方法。
      • “isFile”(默认未定义) - 标记有助于加快决定从何处加载模板的过程。如果模板是要通过 ajax 加载的外部文件,则设置为 true; 如果是文档中元素的 jQuery 选择器,则设置为 false。默认未定义表示插件将首先在文档中检查,然后尝试加载外部文件。
      • “paged”(默认为 false) - 一个布尔标志,指示是否应该对数组进行分页。
      • “pageNo”(默认值 1) - 一个整数,如果正在分页数据,则显示该页面。
      • “elemPerPage”(默认为 10) - 如果正在分页数据,则每页显示的元素数。
      • “append”(默认为 false) - 如果设置为 true,则模板将附加到元素而不是替换元素的内容。
      • “prepend”(默认为 false) - 如果设置为 true,则模板将添加到元素之前,而不是替换元素的内容。append 选项优先于 prepend,因此如果两个选项都设置为 true,则会附加元素而不是前置元素。
      • “beforeInsert”(默认为 null) - 在将模板插入文档之前调用的回调函数。函数的格式是函数($ elem),其中 $ elem 是即将插入到文档中的填充模板的 jQuery 对象。
      • “afterInsert”(默认为 null) - 如上所述,在将模板插入文档后调用的回调函数。格式与上述相同。
      • “bindingOptions”(默认所有标志为 false):添加标志以忽略某些类型的值。{“ignoreUndefined”:false,“ignoreNull”:false,“ignoreEmptyString”:false}。您在此处设置的标志将在元素级别上被模板中指定的标记覆盖,并带有“data-binding-options”或“data-template-bind”属性。示例可以在 Examples / OptionalBinding 文件夹中找到。
      目录
      目录