js模板引擎

基本语法：

     juicer(tpl,data);     //tpl表示模板， data表示填充模板的数据     

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

     { @each list as item} 

          ${item.prop}

     {@/each}

      {@each list as item,index}

          ${item.prop}

     ${index} //index{@/each}

判断 {@if} ... {@else if} ... {@else} ... {@/if}

     {@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}

注释 {# 注释内容}

     {# 这里是注释内容}

一个完整的例子

HTML 代码:

     <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);