关于templ和html拼接比较

传统的html拼接方式：
function loadData(){
$(“#dataList”).html(“”); var pageIndex =$(“#pageIndex”).html();
var action=”/democontroller/listweb.ph”;
ajaxPost(action,{“page” : pageIndex},function(data) {
if ($.trim(data.code) == “40000”) { var rows = data.resobj.rows;$.each(rows,function(index, value) {
var tr = ““;
tr += ““+rows[index].name+”“;
//代码转名称
if(rows[index].tip==”0”){
tr += “公开“;
}else{
tr += “私密“;
}
tr += ““+rows[index].createtime+”“;
//代码转名称
if(rows[index].flag==”1”){
tr += “开始“;
}else{
tr += “结束“;
}
tr += ““;
tr += “

“;
tr += “

”;
tr += “编辑”;
tr += “

“;
tr += “

“;
tr += “删除”;
tr += “

“;
tr += “

“;
tr += “结束活动”;
tr += “

“;
tr += “

“;
$(“#dataList”).append(tr);
//按钮颜色和图标一共有7种。分别是白色，浅蓝色，深蓝色，绿色，黄色，红色，黑色，对应的class为btn,btn btn-primary,btn btn-info,
//btn btn-success,btn btn-warning,btn btn-danger,btn btn-inverse
});
pageStr(data,”pageDiv”);// 放置到分页控件
}
}, ‘json’);
}

---

以上是html动态拼接的方法

---

运用jquery的templ方法：
function loadData(){
var pageIndex=$(“#pageIndex”).html(); var userId=$(“#userId”).val();
var name=$(“#name”).val(); var qqnumber=$(“#qqnumber”).val();
var phone=$(“#phone”).val(); var action=”/userinfo/selectAllUserInfoForPage.ph”; ajaxPost(action,{“page”:pageIndex,”userId”:userId,”name”:name,”qqnumber”:qqnumber,”phone”:phone},function(data){ if(data.code==”40000”){$(“#userList”).empty();
$(“#userData”).tmpl(data.resobj).appendTo(“#userList”);
pageStr(data, “pageDiv”);// 分页控件
}
},’json’);
}

{{each(i,row) rows}} {{= row.userid}} {{= row.loginname}} {{= row.username}} {{= row.phone}} {{= row.gold}} {{= row.score}} {{= convertTimestampForYYYYMMDDHHmmss(row.lastlogintime)}} 修改用户金币银币  重置密码 {{/each}}

---

那种方式更好一目了然