10 };

11 juicer.register('links_build', links); //注册自定义函数

12 juicer(tpl, json);

* 转义/避免转义

- ${变量} 在输出之前会对其内容进行转义，如果你不想输出结果被转义，可以使用 $${变量} 来避免这种情况。

view sourceprint?1 var json = {

2 value: 'juicer'

3 };

4 var escape_tpl='${value}';

5 var unescape_tpl='$${value}';

6 juicer(escape_tpl, json); //输出 'juicer'

7 juicer(unescape_tpl, json); //输出 'juicer'

*循环遍历 {@each} ... {@/each}

- 遍历数组，${index}当前索引

view sourceprint?1 {@each list as item, index}

2 ${item.prop}

3 ${index} //当前索引

4 {@/each}

*判断 {@if} ... {@else if} ... {@else} ... {@/if}

*注释 {# 注释内容}

{# 这里是注释内容}

*辅助循环 {@each i in range(m, n)}

view sourceprint?1 {@each i in range(5, 10)}

2 ${i}; //输出 5;6;7;8;9;

3 {@/each}

*子模板嵌套 {@include tpl, data}

- 子模板嵌套除了可以引入在数据中指定的子模板外，也可以通过指定字符串`#id`使用写在`script`标签中的模板代码.

- HTML代码：

view sourceprint?1

- Javascript 代码：

view sourceprint?01 var tpl = 'Hi, {@include "#subTpl", subData}, End.';

02

03 juicer(tpl, {

04 subData: {

05 name: 'juicer'

06 }

07 });

08

09 //输出 Hi, I'm sub content, juicer, End.

10 //或者通过数据引入子模板，下述代码也将会有相同的渲染结果：

11

12 var tpl = 'Hi, {@include subTpl, subData}, End.';

13

14 juicer(tpl, {

15 subTpl: "I'm sub content, ${name}",

16 subData: {

17 name: 'juicer'

18 }

19 });

一个完整的例子

HTML 代码:

view sourceprint?01

Javascript 代码:

view sourceprint?01 var data = {

02 list: [

03 {name:' guokai', show: true},

04 {name:' benben', show: false},

05 {name:' dierbaby', show: true}

06 ],

07 blah: [

08 {num: 1},

09 {num: 2},

10 {num: 3, inner:[

11 {'time': '15:00'},

12 {'time': '16:00'},

13 {'time': '17:00'},

14 {'time': '18:00'}

15 ]},

16 {num: 4}

17 ]

18 };

19

20 var tpl = document.getElementById('tpl').innerHTML;

21 var html = juicer(tpl, data);