juicer在jsp上渲染失败，html成功

<%@page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



this is juicer test



<br> var data={<br> list:[<br> {name:&#39;guokai&#39;,show:true},<br> {name:&#39;benben&#39;,show:false},<br> {name:&#39;dier&#39;,show:true}<br> ],<br> blah:[<br> {num:1},<br> {num:2},<br> {num:3,inner:[<br> {&#39;time&#39;:&#39;15:00&#39;},<br> {&#39;time&#39;:&#39;16:00&#39;},<br> {&#39;time&#39;:&#39;17:00&#39;},<br> {&#39;time&#39;:&#39;18:00&#39;}<br> ]},<br> {num:4}<br> ]<br> };</p> <pre><code> var tpl=[ &#39;&lt;ul&gt;&#39;, &#39;{@each list as it, k}&#39;, &#39;&lt;li&gt;${it.name} (index: ${k})&lt;/li&gt;&#39;, &#39;{@/each}&#39;, &#39;{# first level attribute must specify the &quot;data.&quot; prefix}&#39;, &#39;{@each blah as it}&#39;, &#39;&lt;li&gt;&#39;, &#39;num: ${it.num} &lt;br /&gt;&#39;, &#39;{@if it.num==3}&#39;, &#39;{@each it.inner as it2}&#39;, &#39;${it2.time} &lt;br /&gt;&#39;, &#39;{@/each}&#39;, &#39;{@/if}&#39;, &#39;&lt;/li&gt;&#39;, &#39;{@/each}&#39;, &#39;&lt;/ul&gt;&#39; ].join(&#39;\n&#39;); var inc=function(n) { return n+1; }; var starttimestamp=new Date().getTime(); juicer.set(&#39;cache&#39;,true); juicer.set(&#39;errorhandling&#39;,false); juicer.set(&#39;strip&#39;,true); juicer.set(&#39;detection&#39;,false); for(var i=0;i&lt;1000;i++) { juicer(tpl,data); } var endtimestamp=new Date().getTime(); var exhausttime=endtimestamp-starttimestamp; document.write(juicer(tpl,data)); document.write(&#39;run time: &#39;+exhausttime); console.log(juicer(tpl).render.toString()); console.log(exhausttime); &lt;/script&gt; </code></pre> <p></body><br> </html><br> <img src="https://img-ask.csdn.net/upload/201612/16/1481872618_138290.jpg" alt="图片说明"><br> ==================下面是成功的======================<br> &lt;!DOCTYPE HTML&gt;<br> <html lang="en"><br> <head><br> <meta charset="UTF-8"><br> <title></title><br> <script type="text/javascript" src="../src/juicer.js">


<br> var data={<br> list:[<br> {name:&#39;guokai&#39;,show:true},<br> {name:&#39;benben&#39;,show:false},<br> {name:&#39;dier&#39;,show:true}<br> ],<br> blah:[<br> {num:1},<br> {num:2},<br> {num:3,inner:[<br> {&#39;time&#39;:&#39;15:00&#39;},<br> {&#39;time&#39;:&#39;16:00&#39;},<br> {&#39;time&#39;:&#39;17:00&#39;},<br> {&#39;time&#39;:&#39;18:00&#39;}<br> ]},<br> {num:4}<br> ]<br> };</p> <pre><code> var tpl=[ &#39;&lt;ul&gt;&#39;, &#39;{@each list as it, k}&#39;, &#39;&lt;li&gt;${it.name} (index: ${k})&lt;/li&gt;&#39;, &#39;{@/each}&#39;, &#39;{# first level attribute must specify the &quot;data.&quot; prefix}&#39;, &#39;{@each blah as it}&#39;, &#39;&lt;li&gt;&#39;, &#39;num: ${it.num} &lt;br /&gt;&#39;, &#39;{@if it.num==3}&#39;, &#39;{@each it.inner as it2}&#39;, &#39;${it2.time} &lt;br /&gt;&#39;, &#39;{@/each}&#39;, &#39;{@/if}&#39;, &#39;&lt;/li&gt;&#39;, &#39;{@/each}&#39;, &#39;&lt;/ul&gt;&#39; ].join(&#39;\n&#39;); var inc=function(n) { return n+1; }; var starttimestamp=new Date().getTime(); juicer.set(&#39;cache&#39;,true); juicer.set(&#39;errorhandling&#39;,false); juicer.set(&#39;strip&#39;,true); juicer.set(&#39;detection&#39;,false); for(var i=0;i&lt;1000;i++) { juicer(tpl,data); } var endtimestamp=new Date().getTime(); var exhausttime=endtimestamp-starttimestamp; document.write(juicer(tpl,data)); document.write(&#39;run time: &#39;+exhausttime); console.log(juicer(tpl).render.toString()); console.log(exhausttime); &lt;/script&gt; </code></pre> <p></body><br> </html><br> <img src="https://img-ask.csdn.net/upload/201612/16/1481872688_592055.jpg" alt="图片说明"></p>

http://blog.csdn.net/towardsfuture/article/details/7331778

由于jsp中的EL表达式语法和jquery.tmpl十分类似，所以单纯的使用${name}数据是渲染不上tmpl的. SO.. 要加上转义:

  • ${'${'}amount} 或者 \${amount} (推荐)