juicerjs引用模板的使用方式

来源:互联网 发布:sql转换成日期格式函数 编辑:程序博客网 时间:2024/06/03 21:00
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <script id="tpl" type="text/juicer">            <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>        <div id="container">        </div>          <script src="js/jquery.js"></script>      <script src="js/juicer.js"></script>      <script src="js/test.js"></script>    </body></html>

其中juicerjs官网下载: http://juicer.name/docs/docs_zh_cn.html
test.js:

        var data={            list:[                {name:'guokai',show:true},                {name:'benben',show:false},                {name:'dier',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);        $("#container").html(html);
原创粉丝点击