juicerjs引用模板的使用方式

最新推荐文章于 2021-07-18 14:38:58 发布

原创最新推荐文章于 2021-07-18 14:38:58 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jucier

pc-web前端开发专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在项目中引用和使用JuicerJS模板引擎，详细解析了JuicerJS的基本用法，包括从官网下载、引入到项目中以及实际应用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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