template
Posted vsmart
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了template相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template</title>
<script src="http://hs.3g.cnfol.com/uh/Js/WeiXin/jquery.1.91.js"></script>
</head>
<body>
<script id="tpl" type="type/template">
<h2 onclick="alert(5)">{{ name }}</h2>
<span data-if="age>25">{{ age }}</span>
<div data-show="showbool">8888</div>
</script>
<div id="context" data-for data-html="tpl"></div>
<script>
// 数据data
var data = [{
name : ‘zhl‘,
age : 30,
showbool : false,
dataif:true
},{
name : ‘mll‘,
age : 20,
showbool : false,
},{
name : ‘zhl‘,
age : 10,
showbool : true,
}]
/*var data = {
name : ‘zhl‘,
age : 30,
showbool : false,
dataif:true
};*/
// 模版化调用
// template(id,data);
// @id : 放元素的容器
// @data : 数据
template(‘context‘,data);
function template(id,data){
var wrapParent = $(‘#‘+id);
var tplhtml = $(wrapParent).attr("data-html");
var tplstr = $(‘#‘+tplhtml).html();
var re = /{{\s*(\w+)\s*}}/g;
if(data instanceof Array){
var strtemp = ‘‘;
for(var i=0; i<data.length; i++){
strtemp += dataHtmlStr(data[i]);
}
$(wrapParent).html(strtemp);
}else{
$(wrapParent).html(dataHtmlStr(data));
}
function dataHtmlStr(data){
return (function(){
return tplstr.replace(re,function(matchs,key){
return data[key];
});
})();
}
var objChild = $(wrapParent).children();
var tplLen = data.length;
var otplChild = jQuery.parseHTML($(‘#‘+tplhtml).html());
var otplnum = 0;
for(var i=0; i<otplChild.length;i++){
if(otplChild[i].nodeType == 1){
otplnum++;
}
}
var reg = /^[a-z|A-Z|_]+[a-z|A-Z|_|\d]*/g;
matchStr(‘data-if‘);
matchStr(‘data-show‘);
function matchStr(attr){
for(var i = 0; i<objChild.length;i++){
var strDataIf = $(objChild[i]).attr(attr);
var strMatch = $(objChild[i]).attr(attr) ? $(objChild[i]).attr(attr).match(reg)[0] : ‘‘;
if(strMatch){
strDataIf = strDataIf.replace(reg,data instanceof Array ? data[Math.floor(i/3)][strMatch] : data[strMatch]);
if(eval(strDataIf) == true){
$(objChild[i]).insertBefore($(objChild[i+1]));
}else if(eval(strDataIf) == false){
$(objChild[i]).remove();
}
}
}
}
}
</script>
</body>
</html>
以上是关于template的主要内容，如果未能解决你的问题，请参考以下文章