首页 > 代码库 > template

template

2024-09-14 08:35:55   219人阅读

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


联系
我们