<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>crox</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="${base}/js/jquery1.11.min.js"></script> <script src="${base}/js/crox1.3.1.js"></script> </head> <body> <div id='tt'> 转义取值: <div>A: {{root.e>2}} - B: {{'a b c'<4}}</div> 不转义取值: <div>A: {{{root.e>2}}} - B: {{{'a b c'<'5'}}}</div> 原样输出: <div>"{{#raw}}{{root.e>2}}胜多负少{{/raw}}"</div> <br> 布尔: <div>"{{root.bbb}}"</div> ['']取值: <div>"{{root['没引号']}}"</div> 复合属性: <div>"{{root["复合.属性"]}}"</div> <br> 声明一个变量 ， 并赋值: <div>{{set c = root.ee}} c.e: {{c.e}}</div> if判断: <div>{{#if root.e > root.e+ 1 }} E > E + 1 {{else}} E <= E+ 1 {{/if}}</div> 遍历对象: <div> <!--两个 string 会声明一个名字为其值的变量，第一个表示 值，第二个表示 索引 (可选)。 --> {{#forin root val index}} {{index}} => {{val}}, {{/forin}} </div> 遍历数组: <div> <!--也可以用forin --> {{#each root.list val index}} {{index}} => {{val}}, {{/each}} </div> 直接调用js函数或方法: <div>{{console.log(root.bb.toUpperCase())}}</div> <div>{{empty(root.f,'amIurs发现新大陆!')}}</div> </div> <hr /> </body> <script type="text/javascript"> var data = {没引号: '没引号ok' , '有引号': '有引号ok' , "复合.属性": '能得到' , bb: 'a b c' , ee: {d: 3 , e: '哈哈' , } , e: 3 , f: '' , bbb: true , null值: null , list: ['a' , 'b' , 'c' , false , null , '结束'] }; $('#tt').after(crox('tt' , data));//后期处理 function crox(ele , data) { var source = $('#' + ele).hide().html(); var source = source.replace(/>/g , '>').replace(/</g , '<'); var temp = Crox.compile(source); var result = temp(data);//将数据 填充到模板 console.log(result); return '<div id='+ele+'-crox>' + result + '</div>'; } function empty(str , val) { return str != null && str.toString() != '' ? str : val; } </script> </html>