JQuery-Tmpl,Html範本
以往,如Tooltip、AutoComplete、或各種動態產生的html區塊,
我們都會透過ajax取得資料,並自己處理html tag,塞對應的資料進去,相當的耗時,做的處理也多,寫的程式也多,還加上組html相當的煩,
雖然後來使用ajax+php-ci,將組好的html回傳,但如果有需要資料的物件內容時,又要刻意將資料塞入hidden或隱藏的div裡面,或attr裡面。
想想應該有解吧,的確有JQuery-Tmpl這樣的資源可以使用
既上一篇文章
https://dotblogs.com.tw/newmonkey48/2018/10/25/160151
我做了一個加強版,ul裡的資料,不再寫死,而是動態產生出來,改成如下
<body>
<div>
<ul class="names">
</ul>
</div>
</body>
<script class="template" type="text/x-custom-template">
<li data-name="${Name}" data-age="${Age}">${Name}</li>
</script>
<script>
function initNames(){
var template_html = $('.template').html();
var names = [{'Name':'王大明','Age':18},{'Name':'李小二','Age':24}];
$.template( "Template", template_html );
$.tmpl( "Template", names ).appendTo('.names');
}
$(document).ready(function(){
initNames();
$('ul li').click(function(){
var data = $(this).data();
//alert(JSON.stringify(data));
alert(data.name+' '+data.age+'歲');
});
});
</script>
官方似乎沒有提供下載的地方,
但GitHub有可以下載所以,到GitHub下載JQuery-tmpl
https://github.com/BorisMoore/jquery-tmpl
如此一來,前端大量的動態產生,就變得輕鬆而不複雜。