使用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. 论文笔记：Rich feature hierarchies for accurate object detection and semantic segmentation

    在上计算机视觉这门课的时候,老师曾经留过一个作业:识别一张 A4 纸上的手写数字.按照传统的做法,这种手写体或者验证码识别的项目,都是按照定位+分割+识别的套路.但凡上网搜一下,就能找到一堆识别的教程 ...

  2. CDHtmlDialog探索----WebBrowser扩展和网页Javascript错误处理

    当WebBrowser控件(CDHtmlDialog自动创建了WebBrowser控件)加载的网页中含有错误Javascript代码时默认情况下控件会弹出错误信息提示对话框,相对于用户体验来说这样的提 ...

  3. shutil.copy()、os.walk()、os.rename()实例

    #!/usr/bin/python # -*- coding: UTF-8 -*- import os import shutil Path = "panel/" PNPath = ...

  4. c#基础之异常处理

    在开发过程中,经常遇到各种各样的小问题,很多是由于基础不牢固,没有经常总结导致的.遇到重复的问题可能可根据以往经验处理,但是对问题本身引发的原因进行深入的了解.工作很多年,但是c#基础像一层冰一样,可 ...

  5. 视觉SLAM之词袋（bag of words） 模型与K-means聚类算法浅析

    原文地址:http://www.cnblogs.com/zjiaxing/p/5548265.html 在目前实际的视觉SLAM中,闭环检测多采用DBOW2模型https://github.com/d ...

  6. java对图片进行透明化处理

    package utils; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.File; ...

  7. RGB、YUV和HSV颜色空间模型

    一.概述 颜色通常用三个独立的属性来描述,三个独立变量综合作用,自然就构成一个空间坐标,这就是颜色空间.但被描述的颜色对象本身是客观的,不同颜色空间只是从不同的角度去衡量同一个对象.颜色空间按照基本机 ...

  8. Eclipse中三种设置编码格式的方法

    转自:https://blog.csdn.net/rainy_black_dog/article/details/52403735 很早以前听过一位老师说过:咱们中国人不管学习哪种编程语言,总会遇到乱 ...

  9. [转]Navicat Premium 12试用期的破解方法

    link: https://blog.csdn.net/Jason_Julie/article/details/82864187 ref: https://www.jianshu.com/p/42a3 ...

  10. [PHP]session回收机制及php.ini session生命期

    由于PHP的工作机制,它并没有一个daemon线程,来定时地扫描session信息并判断其是否失效.当一个有效请求发生时,PHP会根据全局变量 session.gc_probability/sessi ...