Completely master the jquery tmpl template-JS Tutorial-php.cn

Completely master the jquery tmpl template

小云云

Release： 2017-12-29 11:30:24

Original

6067 people have browsed it

Before using Angular for template rendering, I accidentally discovered the lightweight jquery tmpl. Its documentation is here. This article mainly brings you a jquery tmpl template (explanation with examples). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Official explanation of the plug-in: use the first matched element as a template, render the specified data, and the signature is as follows:

.tmpl([data,][options])

Copy after login

The parameters The purpose of data is obvious: the data used for rendering can be any js type, including arrays and objects. Options are generally options. The official pointed out that the options here are a map of user-defined key-value pairs, inherited from the tmplItem data structure, and are suitable for use during the template render action.

You can download the latest tmpl plug-in here. It is worth mentioning that the official also stated that tmpl is currently a beta version and should be used with caution..

The following is a simple example

<!DOCTYPE html>
<html>
<head>
 <title>jquery template demo</title>
 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="js/jquery.tmpl.js"></script>
 <script id="myTemplate" type="text/x-jquery-tmpl">
  <tr><td>${ID}</td><td>${Name}</td></tr>
 </script>
 <script type="text/javascript">
  $(function () {
   var users = [{ ID: &#39;hao1&#39;, Name: &#39;Tony&#39; }, { ID: &#39;hao2&#39;, Name: &#39;Mary hui&#39;}];
   $(&#39;#myTemplate&#39;).tmpl(users).appendTo(&#39;#rows&#39;);
  });
 </script>
 <style type="text/css">
  body
  {
   padding: 10px;
  }
  table
  {
   border-collapse: collapse;
  }
 </style>
</head>
<body>
 <table cellspacing="0" cellpadding="4" border="1">
  <tbody id="rows">
  </tbody>
 </table>
</body>
</html>

Copy after login

The effect is as follows

When defining a template, the recommended way is to define and use

<script id=&#39;templateName&#39; type=&#39;text/x-jquery-tmpl&#39;></script>

Copy after login

as a wrapper for the template, but this is not the only way to define it. One way, you can use

<p id="template" > <!-- markup --></p>

Copy after login

to compile the cached template. In jQuery .tmpl(), you can also compile and cache the template in advance, and then use it at the appropriate time. Again, this is useful for some data nesting, such as:

HTML:

<table cellspacing="0" cellpadding="4" border="1">
 <tbody id="compileRows">
 </tbody>
</table>

Copy after login

JavaScript:

<script id="compile1" type="text/x-jquery-tmpl">
 {{tmpl &#39;cached&#39;}}
 <tr><td>${ID}</td><td>${Name}</td></tr>
</script>
<script id="compile2" type="type/x-jquery-tmpl">
 <tr><td colspan="2">${Group}</td></tr>
</script>
<script type="text/javascript">
 $(function () {
  var groupUsers = [{ ID: &#39;hao1&#39;, Name: &#39;Tony&#39;, Group: &#39;Administrators&#39; }, { ID: &#39;hao2&#39;, Name: &#39;Mary hui&#39;, Group: &#39;Users&#39;}];
  $(&#39;#compile2&#39;).template(&#39;cached&#39;);
  $(&#39;#compile1&#39;).tmpl(groupUsers).appendTo(&#39;#compileRows&#39;);
 });
</script>

Copy after login

The effect is as follows

##$.template() method,

Compile a piece of Html into a template, example:

JavaScript

var markup = &#39;<tr><td>${ID}</td><td>${Name}</td></tr>&#39;;
$.template(&#39;template&#39;, markup);
$.tmpl(&#39;template&#39;, users).appendTo(&#39;#templateRows&#39;);

Copy after login

This way you can apply the template defined in markup to the templateRows object.

jQuery .tmpl() tags, expressions, attributes:

${}: Judging from the previous example, the role of this tag is obvious, it is equivalent to a placeholder. But there is another way to write {{= field}} such as:

<script id="myTemplate" type="text/x-jquery-tmpl">
 <tr><td>{{= ID}}</td><td>{{= Name}}</td></tr>
</script>

Copy after login

It must be noted that the "=" sign must be followed by a space, otherwise Ineffective.

jQuery .tmpl() has two useful attributes: $item and $data:

$item represents the current template; $data represents the current data.

Html

<table cellspacing="0" cellpadding="4" border="1">
  <tbody id="propertyRows">
  </tbody>
 </table>

Copy after login

Javascript

<script id="property" type="text/x-jquery-tmpl">
 <tr><td>${ID}</td><td>${$data.Name}</td><td>${$item.getLangs(&#39;; &#39;)}</td></tr> </script>
<script type="text/javascript">
  $(function () {
  var userLangs = [{ ID: &#39;hao1&#39;, Name: &#39;Tony&#39;, Langs: [&#39;PHP&#39;, &#39;Python&#39;] }, { ID: &#39;hao2&#39;, Name: &#39;Mary hui&#39;, Langs: [&#39;Java&#39;, &#39;C#&#39;]}];
  $(&#39;#property&#39;).tmpl(userLangs, {
   getLangs: function (separator) {
    return this.data.Langs.join(separator);
   }
   }).appendTo(&#39;#propertyRows&#39;);
  });
</script>

Copy after login

You can tell at a glance that this tag is used for looping. The usage is as follows: (keywords

{{each Array}}, $value, $index)HTML

<ul id="ul_each"></ul>

Copy after login

Javascript

<script id="eachList" type="text/x-jquery-tmpl">
 <li class="li">
 <span class="a">ID: ${ID};</span>
 <span class="b">Name: ${Name};</span><br/>
 <span class="c">Langs:
  <ul>
  {{each Langs}}
   <li>
   ${$index + 1}:${$value}.
   </li>
  {{/each}}
  </ul>
 </span>
 </li>
</script>
<script type="text/javascript">
 $(function () {
 var userLangs = [{ ID: &#39;hao1&#39;, Name: &#39;Tony&#39;, Langs: [&#39;PHP&#39;, &#39;Python&#39;] }, { ID: &#39;hao2&#39;, Name: &#39;Mary hui&#39;, Langs: [&#39;Java&#39;, &#39;C#&#39;]}];
 $(&#39;#eachList&#39;).tmpl(userLangs).appendTo(&#39;#ul_each&#39;);
 });
</script>

Copy after login

The effect is as follows

{{each}} There is another way of writing:

Javascript

<script id="eachList2" type="text/x-jquery-tmpl">
 <li class="li">
 <span class="a">ID: ${ID};</span>
 <span class="b">Name: ${Name};</span><br/>
 <span class="c">Langs:
  <ul>
  {{each(i,lang) Langs}}
   <li>
   ${i+1}:${lang}
   </li>
  {{/each}}
  </ul>
 </span>
 </li>
</script>

Copy after login

The function is the same as the previous one.

{{if}} and {{else}}, these two tags should be clear at a glance. Let’s go straight to the example:

Javascript

<script id="ifelse" type="text/x-jquery-tmpl">
  <tr>
  <td>${ID}</td>
  <td>${Name}</td>
  <td>
   {{if Langs.length > 1}}
    ${Langs.join(&#39;; &#39;)}
   {{else}}
    ${Langs}
   {{/if}}
  </td>
 </tr>
</script>

Copy after login

If there are more than 1 Langs array elements, use ';' to connect them, otherwise Langs will be displayed directly. The effect is as follows:

{{html}}, directly replace the placeholder with the object attribute value as HTML code

$.tmplItem() method, using this method, you can get the value from render Re-obtain $item on the element, example:

$(&#39;tbody&#39;).delegate(&#39;tr&#39;, &#39;click&#39;, function () {
 var item = $.tmplItem(this);
 alert(item.data.Name);
});

Copy after login

The effect is as follows:

Related recommendations:

Detailed explanation of the use of jquery.tmpl, a framework for generating HTML using templates

After jQuery obtains json, use zy_tmpl to generate a drop-down menu, jsonzy_tmpl_PHP tutorial

Use zy_tmpl to generate drop-down menu after jQuery obtains json_PHP tutorial

The above is the detailed content of Completely master the jquery tmpl template. For more information, please follow other related articles on the PHP Chinese website!