js模板引擎art-Template（以前的artTemplate）

最新推荐文章于 2025-06-08 09:09:24 发布

weixin_33727510

最新推荐文章于 2025-06-08 09:09:24 发布

阅读量459

点赞数

文章标签： javascript ViewUI

本文介绍如何利用腾讯的art-Template引擎简化使用js和jquery动态生成复杂HTML的过程。通过实例演示了如何设置模版和数据，最终实现HTML的动态渲染。

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

使用js、jquery动态生成html会非常麻烦。现在的模板引擎可以很简单的解决这个问题。比如腾讯出的art-Template

官网：http://aui.github.io/art-template/zh-cn/
下载：template-web.js（gzip: 6kb）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <!--用于展示模版的位置-->
    <div id="area"></div>

    <script src="http://aui.github.io/art-template/js/template-engines/template-web.js"></script>
    <!--用于存放模版-->
<script id="template" type="text/html">
    <div>
        <!--升级后：Template upgrade: ｛each object as value index｝ -> ｛each object value index｝ -->
        {{each content value }}
            <h1>{{ value.province }}</h1>
            {{each value.city city }}
            <p>{{city}}</p>
            {{/each }}
        {{/each }}
        </div>
    </script>
    <!--用于渲染模版-->
    <script>
        var data = {
            content: [
                { province: '四川', city: ['成都', '绵阳', '自贡'] },
                { province: '广东', city: ['广州', '东莞', '佛山'] },
                { province: '海南', city: ['海口', '三亚'] }
            ]
        };
        var html = template('template', data);
        document.getElementById('area').innerHTML = html;
    </script>
</body>
</html>

参考：https://www.awesomes.cn/repo/aui/arttemplate