纯javascript模板引擎dotpl-js接口介绍

Z.han 发布于 2012/02/24 15:31
阅读 1K+
收藏 4
Dotpl-JS 是一个纯javascript模板引擎,支持IF和FOR关键字,多循环衔套及字段渲染,跨浏览器支持。是一个实用的javascipt工具,页面静态化利器!
http://www.oschina.net/p/dotpl-js

接口介绍
    /**
     * 根据模板和数据生成视图
     * 模板支持IF逻辑判断和FOR循环语句,循环嵌套,字段渲染
     * @param tpl 模板字符串 - 模板字段如${fieldName}或${parent.fieldName}
     * @param data JSON数据结构 - 如{...}或[...]
     * @param renderer 字段渲染回调函数,返回渲染后字段格式,分别有五个参数:
     * 参数1:字段名称
     * 参数2:字段数值
     * 参数3:当前数据集
     * 参数4:循环数据集名称,可用作区分循环内和循环外的字段渲染
     * 参数5:循环数据数组
     * @return 生成视图字符串
     */
   dotpl.applyTpl(tpl, data, renderer)

    /**
     * 访问远程模板,根据数据生成视图
     * @param url 模板远程地址
     * @param data JSON数据结构 - 如{...}或[...]
     * @param cb 视图生成后回调函数,参数为视图字符串
     * @param renderer 字段渲染回调函数
     */
   dotpl.applyRTpl(url,data,cb,renderer)

    /**
     * 通过指针式字符串,访问JSON深层次数据
     * @param key 指针式字符串,如:"key.key1.key2..."
     * @param data 深层次JSON数据,如:{key:{key1:{key2:...}}}
     * @return 返回深层数据
     */
   dotpl.diving(key,data)

示例

一般使用形式

alert(dotpl.applyTpl("hello ${val}", {val:"world"})); 
alert(dotpl.applyTpl("hello ${val} ${val2}", {val:"world",val1:"wide-web",val2:"good"}, function(k,v,kv){ 
        if(k=='val') return kv['val']+"-"+kv['val1']; })); //使了渲染函数
alert(dotpl.applyTpl("hello ${data.val}", {data:{val:"freedom"}})); 
alert(dotpl.applyTpl("hello ${data.val} nothing ${none}", {data:{val:"freedom"}})); 
alert(dotpl.applyTpl("hello ${data.data1.val}", {data:{data1:{val:"evolution"}}})); 
alert(dotpl.applyTpl("hello ${val},i ${action} you", {val:"town", action:'love'}));

模板使用 IF 逻辑判断:

alert(dotpl.applyTpl("hello ${val},<tpl if=\"'${action}'=='love'\">i ${action} you</tpl>", 
 {val:"town", action:'love'})); 
 
alert(dotpl.applyTpl("hello ${val},if false<tpl if=\"'${action}'=='love'\">i ${action} you</tpl>",  {val:"town", action:'like'}));

模板使用 FOR 循环:

alert(dotpl.applyTpl("list:\n<tpl for=\".\">${__offset} hello ${key} ${val}\n</tpl>",  [{key:"world", val:'like'},{key:"town", val:'freedom'}])); 
 
alert(dotpl.applyTpl("list:\n<tpl for=\"data\">${__offset} hello ${key} ${val}\n</tpl>",  {data:[{key:"world", val:'like'},{key:"town", val:'freedom'}]})); 
 
alert(dotpl.applyTpl("list:\n<tpl for=\"data\">${__offset} hello ${__val} \n</tpl>", {data:[1,2,4]})); 
 
alert(dotpl.applyTpl("list:\n<tpl for=\"data\">${__offset} hello ${__val} \n</tpl>", {data:["s1","s2","s3"]}));

模板使用多个 FOR 循环和嵌套:

alert(dotpl.applyTpl("list:\n<tpl for=\"data\">${__offset} hello ${key} ${val}\n</tpl> 
list2:\n<tpl for=\"data\">${__offset} 1024 ${key} ${val}\n</tpl>",  {data:[{key:"world", val:'like'},{key:"town", val:'freedom'}]})); 
 
alert(dotpl.applyTpl("<tpl for=\".\">list${__offset} \n <ul> 
<tpl0 for=\"data\"><li>${__offset} \n ${key} ${val}</li></tpl0></ul></tpl>",  [{data:[{key:"world", val:'like'},{key:"town", val:'freedom'}]} ,{data:[{key:"world1", val:'like1'},{key:"town1", val:'freedom1'}]}]));

访问远程模板:

dotpl.applyRTpl("/display.tpl",{key:'hellow world'},function(view){alert(view);});

diving 示例:

alert(dotpl.diving("data", {data:{data1:{val:"evolution"}}})); 
alert(dotpl.diving("data.data1", {data:{data1:{val:"evolution"}}})); 
alert(dotpl.diving("data.data1.val", {data:{data1:{val:"evolution"}}}));

加载中
返回顶部
顶部