javascript之模板引擎

「爱情、让人受尽委屈。」 2022-08-23 03:59 269阅读 0赞

juicer模板详细用法见 文档  
1.首先从数据库获取数据（模板要的是数组）      
var data = \{\};       
var rows = result.result;  
for (var i = 0; i < rows.length; i++) \{  
    var obj = rows\[i\];  
    if (!data\[obj.fregion\]) \{  
        data\[obj.fregion\] = \[\];  
    \}  
    data\[obj.fregion\].push(obj);  
\}                                     // 得到结果如:Object \{ A: Array\[25\], B: Array\[16\], C: Array\[9\], D: Array\[4\] \}                                                           
    var content = tplEngine(data);    //渲染    
    $('\#tbl\_').append($(content));    //加入容器  
    $.parser.parse('\#tbl\_');          //解析  
  
  
3.在页面中加入模板  
var mydate = new Date();  
function initTempalte() \{  
    $.ajax(\{  
        url : "$\{path\}/pages/tpl/tcelllayouttpl.html?\_=" + mydate,  
        type : "GET",  
        success : function(data) \{  
            tplEngine = $.easyTemplate(data);  
        \},  
        error : function() \{  
            alert('获取模板失败，请重试！');  
        \}  
    \});  
\}  
Object \{ 东区-西部: Array\[7\], 东区-南部: Array\[17\], 东区-北部: Array\[5\], 东区-东部: Array\[7\]\}  
数据进入模板之后：\_ as item,index      
其中：index相当于    东区-西部 即k  
      item 相当于    Array     即value  
        
向Object 中加入自定义的额外数据  
Object \{ 东区-西部: Array\[7\], 东区-南部: Array\[17\], 东区-北部: Array\[5\], 东区-东部: Array\[7\],total:90\}  
例:result\[total\]=\[\];声明数组  
   result\[total\].push(90);  
     
juicer 遍历json index表示：东区-西部  
                 item表示：后面的数组  
       遍历数组 index表示：数组下标  
                 item表示：数组内容