search

Home  >  Article  >  Web Front-end  >  Completely master the jquery tmpl template

Completely master the jquery tmpl template

小云云
小云云Original
2017-12-29 11:30:246185browse

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])

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>

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>

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>

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>

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>

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;);

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>

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>

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>


{{each}}

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>

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>

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>

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>

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);
});

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Tutorial on implementing drop-down list function with jquery and cssNext article：Tutorial on implementing drop-down list function with jquery and css

Related articles

See more