Juicer模板引擎

最新推荐文章于 2024-11-05 21:22:15 发布

原创最新推荐文章于 2024-11-05 21:22:15 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

Juicer 专栏收录该内容

2 篇文章

订阅专栏

这篇博客展示了如何使用Juicer模板引擎来动态渲染HTML内容。通过JavaScript代码，将JSON数据与HTML模板结合，利用Juicer的each和if指令，以及自定义函数links_bulid，实现了列表项的遍历和条件渲染。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="./juicer.js"></script>
</head>
<body>
    <script type="text/template" id="tpl">
        <ul>
            {@each list as item,index}
                <li>${item.name} index=${index}</li>
            {@/each}
            {@each number as item}
                <li>${item.num}</li>
                {# 这是注释：juicer的if判断}
                {@if item.num == 3}
                    {@each item.inner as item2}
                        <li>${item2.time}</li>
                    {@/each}
                {@/if}
            {@/each}

            {# item对象使用自定义函数links_bulid处理}
            {@each list as item}
                <li>${item|links_bulid}</li>
            {@/each}
        </ul>
    </script>

    <script type="text/javascript">
        var data = {
            list:[
                {name:'kong',age:17},
                {name:'wang',age:21},
                {name:'zhang',age:32}
            ],
            number:[
                {num:1},
                {num:2},
                {num:3,inner:[
                    {'time':'15:00'},
                    {'time':'16:00'},
                    {'time':'17:00'}
                ]},
                {num:4}
            ]
        };

        var links = function(data){
            return data.name+"是"+data.age+"岁";
        }

        //注册自定义函数
        juicer.register('links_bulid',links);

        var tpl = document.getElementById('tpl').innerHTML;
        document.write(juicer(tpl,data));
    </script>
</body>
</html>