Introduction to usage examples of jQuery. TMPL of

  • 2020-03-30 03:44:13
  • OfStack

Dynamic request data to update the page is now a very common method, such as blog comments paging dynamic load, weibo rolling load and timed request load.

In these cases, the data returned from the dynamic request is usually either HTML or JSON or XML that has been spelt out, in short, the data is spelt out on the server rather than in the browser. However, returning HTML is not cost-effective in terms of traffic, and in terms of web traffic, JSON is now used more than XML.

One of the annoying things about generating HTML from JSON on the browser side is that it's fine when it's not complicated, but when it's complicated, it's killing you, and you have to be careful and careful about writing JavaScript code that's almost impossible to maintain.

Just as Smarty has been used to solve PHP's data-spelling problems, so has JavaScript, such as jquery.tmpl, which is based on jQuery and is now accepted as an official template plug-in. The detailed API is in jQuery's Templates, and the built-in demos demonstrate all kinds of usage.

On a couple of occasions I've used it myself, it feels good to write the structure in more intuitive HTML than in JavaScript, and then populate the data with JSON variables to hold the space, and the code looks much better.

Tmpl provides several tags:

${} : equivalent to {{=}}, is the output variable, through the HTML code.
{{HTML}}: output variable HTML, but no HTML encoding, suitable for output HTML code.
{{if}} {{else}}: provides branching logic.
{{each}}: provides loop logic, and $value accesses iteration variables.

Usage of jquery TMPL:

Template definition:

Method one:


<script id="movieTemplate" type="text/x-jquery-tmpl"> 
<li> 
<b>${Name}</b> (${ReleaseYear}) 
</li> 
</script>

Method 2:


function makeTemplate(){ 
var markup='<li><b>${Name}</b> (${ReleaseYear})</li> ' ; 
$.template( " movieTemplate " , markup); 
}

DATA:


var movies = [ 
{ Name: "The Red Violin", ReleaseYear: "1998" }, 
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
{ Name: "The Inheritance", ReleaseYear: "1976" } 
];

Script:


$( "#movieTemplate" ).tmpl( movies ) 
.appendTo( "#movieList" );

Example 1:


<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
</head> 
<body> 

<ul class="param-list"></ul> 

<script type="text/x-jquery-tmpl" id="new-param-tmpl"> 
<li rel="${num}"> 
<input type="text" name="key[${num}]" value="${key}" placeholder="key" /> = 
<input type="text" name="value[${num}]" value="${value}" placeholder="value" /> 
<button type="button" class="button small remove-param"><img src="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/69.png" height="12" alt=""/></button> 
<button type="button" class="button small add-param"><span><img src="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/13.png" height="12" alt=""/></button> 
</li> 
</script> 

<script> 
$(function(){ 
function addParam(key, value) { 
var param_list = $('.param-list'); 
var num = param_list.find('li').length; 

// build a template to clone the current row 
var built = $('#new-param-tmpl').tmpl({ 
num: num, 
key: key || '', 
value: value || '', 
}); 
if (key) param_list.prepend(built); 
else param_list.append(built); 

param_list.find('li:not(:last) .add-param').hide(); 
param_list.find('li:last .add-param').show(); 
param_list.find('li:not(:last) .remove-param').show(); 
param_list.find('li:last .remove-param').hide(); 
} 

// bind events 
$('.param-list .remove-param').live('click', function(){ 
$(this).parent().remove(); 
return false; 
}); 
$('.param-list .add-param').live('click', function(){ 
addParam(); 
return false; 
}); 

addParam(); 
})
</script> 
</body> 
</html>

Example 2


<ul id="movieList"></ul> 

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
<li><b>${Name}</b> (${ReleaseYear})</li> 
</script> 

<script type="text/javascript"> 
var movies = [ 
{ Name: "The Red Violin", ReleaseYear: "1998" }, 
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
{ Name: "The Inheritance", ReleaseYear: "1976" } 
]; 

// Render the template with the movies data and insert 
// the rendered HTML under the "movieList" element 
$( "#movieTemplate" ).tmpl( movies ) 
.appendTo( "#movieList" ); 
</script>

Related articles: