search

Home >Web Front-end >JS Tutorial >jQuery .tmpl() usage example introduction_jquery

jQuery .tmpl() usage example introduction_jquery

WBOY
WBOYOriginal
2016-05-16 16:38:581268browse

Dynamic requesting data to update the page is a very common method nowadays, such as paging dynamic loading of blog comments, rolling loading and scheduled request loading of Weibo, etc.

In these cases, the data returned by the dynamic request is usually either assembled HTML, JSON or XML. In short, the data is not assembled on the browser side, but on the server side. However, returning HTML is not cost-effective in terms of transmission volume, and in terms of web transmission, JSON is now used more than XML.

A very troublesome part of generating HTML based on JSON on the browser side is that it is okay when the structure is not complex, but once the structure is complicated, it becomes a nightmare. You need to be very careful to write JavaScript code that is almost impossible to maintain.

Just like Smarty templates are used to solve the problem of data spelling in PHP, JavaScript can also use templates to solve these problems. For example, jquery.tmpl based on jQuery has now been accepted as an official template plug-in. The detailed API is in jQuery's Templates, and the built-in demo also demonstrates various usages.

On my own several uses, I feel very good. I use a more intuitive HTML writing method instead of JavaScript to write the structure, and then use JSON variables to fill in the data. The code looks much better.

Tmpl provides several tags:

${}: Equivalent to {{=}}, it is an output variable and has passed HTML encoding.
{{html}}: Output variable html, but without html encoding, suitable for outputting html code.
{{if }} {{else}}: Provides branching logic.
{{each}}: Provides loop logic, $value access iteration variables.

How to use jquery tmpl:

Template definition:

Method 1: 

<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
    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：Sharing the source code of the rock-paper-scissors game implemented in JavaScript_javascript skillsNext article：Sharing the source code of the rock-paper-scissors game implemented in JavaScript_javascript skills

    Related articles

    See more