js模板引擎juicer嵌入html元素,juicer前端模板引擎(示例代码)

Juicer

中文文档：http://www.juicer.name/docs/docs_zh_cn.html

官网：http://juicer.name/

一个Javascript模板引擎的实现和优化(http://www.open-open.com/lib/view/open1335161835655.html)完全剥离html和代码逻辑，便于多人协作和后期的代码维护。

市面上众多的模板引擎，诸如Mustache, jQuery tmpl, Kissy template, ejs, doT, nTenjin。

“如无必要，勿增实体。” 这是著名的奥卡姆剃须刀法则，简单的说就是避免重复造轮子。

语法

a. ${变量}

支持自定义函数。(通过自定义函数你可以实现很多有趣的功能，类似 ${data|links} 就可以 通过事先定义的自定义函数 links 直接对 data 拼装出 ).

可以看得出，结果被转义了，如果我们上边使用 $${item|links} 就会得到我们预期的结果，这就是下边即将提到的避免转义。

var json = {

value: ‘juicer‘

};

var escape_tpl=‘${value}‘;

var unescape_tpl=‘$${value}‘;

juicer(escape_tpl, json); //输出 ‘<strong>juicer</strong>‘

juicer(unescape_tpl, json); //输出 ‘juicer‘

{@each list as item,index}

{@if index===3}

the index is 3, the value is ${item.prop}

{@else if index === 4}

the index is 4, the value is ${item.prop}

{@else}

the index is not 3, the value is ${item.prop}

{@/if}

{@/each}