您的位置：首页 > 其它

模板引擎Crox用法大全（更新版）

2015-04-21 11:44 483 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航