juicerjs引用模板的使用方式

本文介绍了如何在项目中引用和使用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);
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值