juicer.js模板引擎入门

juicer.js是阿里的一个轻量级模板引擎,min只有7K.

获取定义模板tpl
ps:

<script id = "tpl" type = "text/template">
            需要渲染的模板内容
</script>
var tpl = document.queryselector("#tpl").innerHTML;

使用json数据
ps:

1.直接定义

        var  date = ....    .....(json数据)；

2.ajax获取json数据

        var mysjon;
        //如果使用了ajax要设置为同步，否则DOM还没有生成就会自动执行下面的东西，如果下面有dom操作的地方会报错。
        $.ajaxSettings.async = flase;          
        $getJSON("myjson.json",function(){
                mysjon = date;
        })

juicer渲染模板和数据

           var html = juicer(tpl,mysjon);
           document.body.innerHTML = html;

语法：

遍历整个数组
{@each hot as it,k}             each标签遍历hot数组
${it.name}                      输出
{@/each}                        each标签结束


输出单个
{@each main as it,k}           each标签遍历main数组
{@if k == 1}                   检索key等于1的数组元素
${it.name}                     输出
{@/if}                         if标签结束
{@/each}                       each标签结束

juicer.name网址