juicer无法正常渲染出结果

时隔近半年没用juicer后，再次在项目中引入，发现很奇怪的现象。例如官方中文文档里的的完整例子：

<script id="tpl" type="text/template">
    <ul>
        {@each list as it,index}
            <li>${it.name} (index: ${index})</li>
        {@/each}
        {@each blah as it}
            <li>
                num: ${it.num} <br />
                {@if it.num==3}
                    {@each it.inner as it2}
                        ${it2.time} <br />
                    {@/each}
                {@/if}
            </li>
        {@/each}
    </ul>
</script>

Javascript 代码:

var data = {
    list: [
        {name:' guokai', show: true},
        {name:' benben', show: false},
        {name:' dierbaby', show: true}
    ],
    blah: [
        {num: 1},
        {num: 2},
        {num: 3, inner:[
            {'time': '15:00'},
            {'time': '16:00'},
            {'time': '17:00'},
            {'time': '18:00'}
        ]},
        {num: 4}
    ]
};

var tpl = document.getElementById('tpl').innerHTML;
var html = juicer(tpl, data);

死活得到的都是将${XX}替换为“”的代码段。在juicer()方法前将tpl在控制台输出，你会发现，${XXX}都不见了。

问题描述：text/template中的${XXX}代码都被替换成了“”.

原因分析：ES6新增了${}语法，意为字符串模板。可以将字符串中的${变量名}代码替换成变量值。与juicer冲突，故导致该现象。

解决方法：翻看juicer文档，可以修改语义边界符。在页面初始化时添加以下代码，并将${改为相应的边界符就可以了。

juicer.set({
  'tag::interpolateOpen': '&{' //变量开边界符，可以修改成任意不冲突的符号
});

 

转载于:https://my.oschina.net/momomo/blog/858488