Jquery模板

来源：互联网发布：java hashset treeset 编辑：程序博客网时间：2024/06/17 14:57

Jquery 模板

jQuery .tmpl()的使用

$.ajax({url:urltype:"get",dataType:"json",success:function(data){if(data.rc == 0){            var site = "";$(data.website).each(function(i, site){site += "<tr>"   + "<td>" + site.url +  "</td>"   + "<td>" + site.name + "</td>"   + "<td>" + site.tags + "</td>"    + "</tr>";});$("#rows").append(site);}}});

json请求返回数据后,好多时候拼字符串(尤其是返回list),然后append到dom;
这样比较灵活,但不够讲究,
下面Jquery Tmplate方式,比较干净利索

Tmpl提供了几种tag：
${}：等同于{{=}}，是输出变量，通过了html编码的。
{{html}}:输出变量html,但是没有html编码，适合输出html代码。
{{if }} {{else}}:提供了分支逻辑。
{{each}}:提供循环逻辑，$value访问迭代变量。

<!DOCTYPE html><html><head><title>jquery-tmpl</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="jquery.js" type="text/javascript"></script><script src="jquery.tmpl.min.js" type="text/javascript"></script><script>$(function () { var website = [{ url: 'www.aaa.com', name: 'aaa', tags: ['java', 'html'] }, { url: 'www.bbb.com', name: 'bbb', tags: ['kafka', 'zookeeper']}]; //$('#myTemplate').tmpl(website).appendTo('#rows'); //$('#myTemplate1').tmpl(website).appendTo('#rows'); var data = new Object();data.website = website;$('#myTemplate2').tmpl(data).appendTo('#rows'); //$('#myTemplate').tmpl(website, {//getTags: function (separator) {//return this.data.tags.join(separator);//}//}).appendTo('#rows');}); </script><script id="myTemplate" type="text/x-jquery-tmpl"> <tr><td>${$data.url}</td><td>${$data.name}</td><!--<td>${$item.getTags(';')}</td>--><td>${$data.tags}</td></tr> </script> <script id="myTemplate1" type="text/x-jquery-tmpl"> <tr><td>${url}</td><td>${name}</td><td>${tags}</td></tr> </script> <script id="myTemplate2" type="text/x-jquery-tmpl"> {{each(i, site)website}}<tr><td>${site.url}</td><td>${site.name}</td><td>${site.tags}</td></tr> {{/each}}</script></head><body><table cellspacing="0" cellpadding="3" border="1"> <tbody id="rows"> </tbody> </table> </body></html>

0 0