Exemple d'utilisation de jQuery .tmpl() introduction

Exemple d'utilisation de jQuery .tmpl() introduction_jquery

WBOY

Libérer： 2016-05-16 16:38:58

original

1228 Les gens l'ont consulté

La demande dynamique de données pour mettre à jour la page est une méthode très courante de nos jours, comme le chargement dynamique de pagination des commentaires de blog, le chargement progressif et le chargement de requête planifié de Weibo, etc.

Dans ces cas, les données renvoyées par la requête dynamique sont généralement soit assemblées en HTML, JSON ou XML. Bref, les données ne sont pas assemblées côté navigateur, mais côté serveur. Cependant, renvoyer du HTML n'est pas rentable en termes de volume de transmission, et en termes de transmission Web, JSON est désormais plus utilisé que XML.

Une partie très gênante de la génération de HTML basé sur JSON du côté du navigateur est que c'est bien lorsque la structure n'est pas complexe, mais une fois que la structure est compliquée, cela devient un cauchemar. Vous devez être très prudent pour écrire du JavaScript. code presque impossible à maintenir.

Tout comme les modèles Smarty sont utilisés pour résoudre le problème de l'orthographe des données en PHP, JavaScript peut également utiliser des modèles pour résoudre ces problèmes. Par exemple, jquery.tmpl basé sur jQuery a désormais été accepté comme plug-in de modèle officiel. L'API détaillée se trouve dans les modèles jQuery et la démo intégrée montre également diverses utilisations.

Pour mes propres utilisations, je me sens très bien. J'utilise une méthode d'écriture HTML plus intuitive au lieu de JavaScript pour écrire la structure, puis j'utilise des variables JSON pour remplir les données. Le code est bien meilleur.

Tmpl propose plusieurs balises :

${} : Équivalent à {{=}}, c'est une variable de sortie et a réussi l'encodage HTML.
{{html}} : variable de sortie HTML, mais sans encodage HTML, adaptée à la sortie de code HTML.
{{if }} {{else}} : fournit une logique de branchement.
{{each}} : fournit une logique de boucle et des variables d'itération d'accès $value.

Comment utiliser jquery tmpl :

Définition du modèle :

Méthode 1 :

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

Copier après la connexion

Méthode 2 :

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

Copier après la connexion

DONNÉES :

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

Copier après la connexion

Script :

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

Copier après la connexion

Exemple 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>

Copier après la connexion

Exemple 2

Copier après la connexion