你的位置:首页 > Java教程

[Java教程]模板引擎Crox用法大全(更新版)


<!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\tc'<4}}</div>    不转义取值:    <div>A: {{{root.e>2}}} - B: {{{'a b\tc'<'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\tc' , 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(/&gt;/g , '>').replace(/&lt;/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>