使用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. [转] netstat 查看TCP状态值

    转自 https://www.cnblogs.com/yuyutianxia/p/4970380.html netstat 查看TCP状态值   一.TCP 状态值 netstat -n | awk ...

  2. ROC和AUC理解

    一. ROC曲线概念 二分类问题在机器学习中是一个很常见的问题,经常会用到.ROC (Receiver Operating Characteristic) 曲线和 AUC (Area Under th ...

  3. UniGUI 如何进行 UniDBGrid 的单元 Cell 的计算 ？

    来源:http://forums.unigui.com/index.php?/topic/10508-update-dataset-events-in-unidbgrid/?hl=unidbgrid ...

  4. 关于VC工程编译不过去这件事

    刚开始接触VC的时候,很大一部分时间是在对付编译链接错误,因为经验不足的原因,这些编译链接总让人很沮丧.比如: 1.fatal error LNK1104: 无法打开文件“LIBC.lib”错误 这个 ...

  5. linux中模糊查找文件

    1.在当前目录下搜索指定文件: find . -name test.txt 2.在当前目录下模糊搜索文件: find . -name '*.txt' 3.在当前目录下搜索特定属性的文件: find . ...

  6. mingw zlib-1.2.11 win32-static.patch

    diff --git a/Makefile.in b/Makefile.in index 1852192..c88f5b5 100644 --- a/Makefile.in +++ b/Makefil ...

  7. jquery datetimepicker

    1.详细说明见:https://xdsoft.net/jqplugins/datetimepicker/ 语言选择中文,现在lang配置已经失效;可用: $.datetimepicker.setLoc ...

  8. UML建模图

    UML 2.0规范 迅速成为建立软件系统可视化.规范.文档的标准.统一建模语言(UML) 也被用于非软件系统的建模,并在很多领域,诸如金融,军事,工程方面应用广泛. UML 2 定义了13种基本的图, ...

  9. winform生成条形码和二维码(ZXing.Net)

    首先在项目添加ZXing.Net. 工具-->Nuget包管理器-->Nuget程序包  在所搜栏输入 ZXing.Net 如下图: 添加完成后会看见: 效果图: 所有代码: /// &l ...

  10. noj算法 装载问题 回溯法

    描述: 有两艘船,载重量分别是c1. c2,n个集装箱,重量是wi (i=1…n),且所有集装箱的总重量不超过c1+c2.确定是否有可能将所有集装箱全部装入两艘船. 输入: 多个测例,每个测例的输入占 ...