使用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. log4j - 输出格式控制, PatternLayout参数含义以及详细配置

    转载自:https://blog.csdn.net/reserved_person/article/details/52849505 做项目被log4j的输出格式化参数搞烦了,索性把API的相关部分大 ...

  2. iris数据集（鸢尾花）

    包含三个花的品种(Iris setosa(山鸢尾),Iris virginica(北美鸢尾),Iris versicolor(变色鸢尾)) 每个品种各50个样 每个样本四个特征参数(萼片长度和宽度.花 ...

  3. [转]Python中的eval()、exec()及其相关函数

    Python中的eval().exec()及其相关函数   刚好前些天有人提到eval()与exec()这两个函数,所以就翻了下Python的文档.这里就来简单说一下这两个函数以及与它们相关的几个函数 ...

  4. 【转】模块（configparser+shutil+logging)

    [转]模块(configparser+shutil+logging) 一.configparser模块 1.模块介绍 configparser用于处理特定格式的文件,其本质上是利用open来操作文件. ...

  5. telnetlib 中各种 read 函数的意义

    基本原理 要明白 telnetlib 中各个 read 函数的意义,首先要了解 telnetlib 的工作原理. telnetlib 首先通过 socket 连接从网络接收数据,把数据存储到自己的 r ...

  6. 【转】Leveldb源码分析——1

    先来看看Leveldb的基本框架,几大关键组件,如图1-1所示. Leveldb是一种基于operation log的文件系统,是Log-Structured-Merge Tree的典型实现.LSM源 ...

  7. mysql 定时备份bat脚本 ，方便小型服务简单快速备份mysql

    mysql定时备份bat脚本 echo 数据库为用户名为root 密码为root 数据库名为kdykt echo mysqldump 命令如果没有配置环境变量要在bin目录下执行 set " ...

  8. 28)django-form+ajax实现验证

    form+ajax实现验证 #obj.errors返回的是ErrorDict,不是字典(虽然继承字典) #obj.errors.as_json() 返回的字符串(前端要连续反解两次) #obj.err ...

  9. 安娜Anna：世界最快的超级伸缩的KVS, 秒杀Redis

    伯克利 这个大学在计算机学术界.工业界的地位举足轻重,其中的AMP实验室曾开发出了一大批大获成功. 对计算机行业产生深远影响的分布式计算技术,包括 Spark.Mesos.Tachyon 等.作为AM ...

  10. swoole深入学习 2. tcp Server和tcp Client

    这节来学习Swoole最基础的Server和Client.会通过创建一个tcp Server来讲解. server <?php class Server { private $serv; pub ...