Rumah >hujung hadapan web >tutorial js >jQuery .tmpl() contoh penggunaan introduction_jquery

jQuery .tmpl() contoh penggunaan introduction_jquery

WBOYasal: 2016-05-16 16:38:581266semak imbas

Data permintaan dinamik untuk mengemas kini halaman ialah kaedah yang sangat biasa pada masa kini, seperti pemuatan halaman dinamik komen blog, pemuatan bergolek dan pemuatan permintaan berjadual Weibo, dsb.

Dalam kes ini, data yang dikembalikan oleh permintaan dinamik biasanya sama ada HTML terpasang, JSON atau XML Secara ringkasnya, data tidak dipasang pada bahagian penyemak imbas, tetapi pada bahagian pelayan. Walau bagaimanapun, pemulangan HTML tidak kos efektif dari segi volum penghantaran, dan dari segi penghantaran web, JSON kini digunakan lebih daripada XML.

Bahagian yang sangat menyusahkan dalam menjana HTML berdasarkan JSON pada bahagian penyemak imbas ialah ia baik apabila strukturnya tidak rumit, tetapi apabila strukturnya rumit, ia menjadi mimpi ngeri Anda perlu berhati-hati untuk menulis JavaScript kod yang hampir mustahil untuk dikekalkan.

Sama seperti templat Smarty digunakan untuk menyelesaikan masalah ejaan data dalam PHP, JavaScript juga boleh menggunakan templat untuk menyelesaikan masalah ini Sebagai contoh, jquery.tmpl berdasarkan jQuery kini telah diterima sebagai pemalam templat rasmi. API terperinci terdapat dalam Templat jQuery, dan demo terbina dalam juga menunjukkan pelbagai penggunaan.

Atas beberapa kegunaan saya sendiri, saya berasa sangat baik menggunakan kaedah penulisan HTML yang lebih intuitif dan bukannya JavaScript untuk menulis struktur, dan kemudian menggunakan pembolehubah JSON untuk mengisi data.

Tmpl menyediakan beberapa tag:

${}: Bersamaan dengan {{=}}, ia adalah pembolehubah output dan telah melepasi pengekodan HTML.
{{html}}: Output pembolehubah html, tetapi tanpa pengekodan html, sesuai untuk mengeluarkan kod html.
{{jika }} {{else}}: Menyediakan logik cawangan.
{{each}}: Menyediakan logik gelung, pembolehubah lelaran akses $value.

Cara menggunakan jquery tmpl:

Takrif templat:

Kaedah 1:

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

Kaedah 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" } 
];

Skrip:

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

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

Contoh 2

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Berkongsi kod sumber permainan rock-paper-scissors yang dilaksanakan dalam kemahiran JavaScript_javascriptArtikel seterusnya：Berkongsi kod sumber permainan rock-paper-scissors yang dilaksanakan dalam kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi