juicer模板引擎使用记录.md

Posted 2021-01-09 vipinchan

Juicer 是一个高效、轻量的前端 (javascript) 模板引擎，使用 Juicer 可以使你的代码实现数据和视图模型的分离(MVC)。

注释：{# 注释内容}
辅助循环：{@each i in range(m, n)}
判断：{@if} ... {@else if} ... {@else} ... {@/if}
转义/避免转义：$${变量}可避免内容被转义

输出变量：${变量}

${name}
${name|function}
${name|function, arg1, arg2}

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

{@each list as item, index}
    ${item.prop}
    ${index} //当前索引
{@/each}

模板定义及使用：

// 引入juicer
<script type="text/javascript" src="juicer-min.js></script>

// 定义模板
<script type="text/juicer"
id="tplId">
    Hi, ${name}
</script>

// 渲染模板
var data = { name: ‘vipin‘ };
juicer(‘tplId‘, data);

官方地址：https://github.com/PaulGuo/Juicer