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

js模板引擎art-Template（以前的artTemplate）的更多相关文章

  1. js 模板引擎 -Art Template

    一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  2. js模板引擎art-template使用方法

    art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/ 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好:语法. ...

  3. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  4. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

  5. js模板引擎之artTemplate

    http://www.cnblogs.com/52fhy/p/5393673.html artTemplate 不支持requre.js,悲剧啊,只能用juicer啊 这个还是比较有名的. 简介: a ...

  6. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  7. js模板引擎

    js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...

  8. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  9. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  10. 浅析js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

随机推荐

  1. Direct Shot Correspondence Matching

    一篇BMVC18的论文,关于semantic keypoints matching.dense matching的工作,感觉比纯patch matching有意思,记录一下. 1. 摘要 提出一种针对 ...

  2. canner CMS 系统 （公司在台湾） https://www.canner.io/

    canner  CMS 系统 (公司在台湾) https://www.canner.io/ https://github.com/Canner/canner 一种创新的CMS构建方式,采用 Nodej ...

  3. u3d常用代码小集合

    01.基本碰撞检测代码 function OnCollisionEnter(theCollision : Collision){ if(theCollision.gameObject.name == ...

  4. softmax详解

    原文地址:https://blog.csdn.net/bitcarmanlee/article/details/82320853 1.softmax初探 在机器学习尤其是深度学习中,softmax是个 ...

  5. web@css样式进阶--图形字体、动画、显隐....

    1.图形字体<i class="fa fa-heart"></i> 操作类名,需<link rel="stylesheet" hr ...

  6. Linux VPS基础命令 - cp复制文件命令

    cp命令在Linux VPS操作和应用过程中还是比较常用的,我们可以用来复制文件或者文件夹,重命名一个新的文件以及复制到其他路径中用于文件的转移. 举例用法: 1.复制root目录下的itbulu.c ...

  7. Light OJ 1102

    题意: 给你一个数 N , 求分成 K 个数 (可以为 0 ) 的种数: 思路: 类似 在K个抽屉放入 N 个苹果, 不为0, 就是 在 n-1 个空隙中选 m-1个: 为 0, 就可以先在 K 个抽 ...

  8. CF 2B The least round way DP+Math

    题意: 找出一条路, 使每个节点相乘,得到的数末尾 0 最少 每次移动只能向右或者向下, 找到后打印路径 ///按照题目要求,就是找出一条从左上角到右下角中每个数含2 or 5 最少的路 ///可以用 ...

  9. vue.js插槽

    具体讲解的url https://github.com/cunzaizhuyi/vue-slot-demo //例子 用jsfiddle.net去运行就好 <!DOCTYPE html> ...

  10. 接口签名进行key排序,并MD5加密

    import org.apache.commons.codec.digest.DigestUtils; import java.io.UnsupportedEncodingException; imp ...