<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</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/crox.js"></script>
</head>
<body>
<textarea id="tpl" style=‘display:none‘>
转义取值:
<p>
<!--输出 html 转义 的 expr 的值。 -->
A: {{‘a b\tc‘}} - B: {{root.bb}}
</p>
取值:
<p>
<!--直接输出 expr 的值。 -->
A: {{{true}}} - B: {{{root.bb}}}
</p>
原本值:
<p>
<!--不进行翻译。 -->
"{{#raw}}{{root.bb}}{{/raw}}"
</p>
set赋值:
<p>
<!--声明一个变量 id， 并赋值。 -->
{{set c = root.c}} D: {{c.d}} E: {{root.e}}
</p>
if判断:
<p>{{#if root.e > root.a + 1 }} E > A + 1 {{else}} E <= A + 1 {{/if}}</p>
遍历对象:
<p>
<!--两个 string 会声明一个名字为其值的变量，第一个表示 值，第二个表示 索引 (可选)。 -->
{{#forin root ‘val2‘ ‘index‘}} {{index}} => {{val2}} {{/forin}}
</p>
遍历数组:
<p>
<!--两个 string 会声明一个名字为其值的变量，第一个表示 值，第二个表示 索引 (可选)。 -->
{{#each root.list ‘val2‘ ‘index‘}} {{index}} => {{val2}} {{/each}}
</p>
直接调用js函数或方法:
<p>{{alert(root.bb.toUpperCase())}}</p>
<p>{{empty(root.ee,‘amIurs发现新大陆!‘)}}</p>
</textarea>
</body>
<script type="text/javascript">
var tmpl = $(‘#tpl‘).text();
var data = {a: 1 , b: 2 , bb: ‘a b\tc‘ , c: {d: 3
} , e: 1 , ee: ‘‘ , f: true , ff: null , list: [‘a‘ , ‘b‘ , ‘c‘]
};
var result = Crox.render(tmpl , data);//将数据 填充到模板
$(‘#tpl‘).before(result);
function empty(str , val) {
return str.length > 0 && str != ‘‘ ? str : val;
}
</script>
</html>
时间： 2024-10-10 14:25:28