js模板引擎art-Template(以前的artTemplate)

使用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

作者:【唐】三三

出处:https://www.cnblogs.com/tangge/p/9783044.html

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   【唐】三三  阅读(6060)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2013-10-13 MVC基础知识 – 1.抽象工厂模式
2011-10-13 Bind和Eval的区别详解
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示