使用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. pytorch1.0 用torch script导出模型

    python的易上手和pytorch的动态图特性,使得pytorch在学术研究中越来越受欢迎,但在生产环境,碍于python的GIL等特性,可能达不到高并发.低延迟的要求,存在需要用c++接口的情况. ...

  2. 【Nginx】Nginx简介及在CentOS7.0下安装教程

    是什么 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并发能 ...

  3. js变量的解构赋值

    今天在学习时看到几段代码,让我感叹JS的灵活,特此一记: let stateObj = {a:1,b:3}; let newObj = {b:13,c:4} ; stateObj = {...stat ...

  4. 多线程内存问题分析之mprotect方法【转】

    转自:https://blog.csdn.net/agwtpcbox/article/details/53230664 http://www.yebangyu.org/blog/2016/02/01/ ...

  5. 【SCOI2010】序列操作

    各种繁琐的线段树标记操作...赤裸裸的码农题. 调了一个晚上,最后写篇题解. 题解亮点:代码短,~~跑得慢(连第一页都没挤进去)~~ 其实我跟你们说啊,代码短是好事~~(这里不是说压行好,我的代码不压 ...

  6. 一道并查集的（坑）题：关闭农场closing the farm

    题目描述 in English: Farmer John and his cows are planning to leave town for a long vacation, and so FJ ...

  7. ubuntu 远程登录错误

    利用  ubuntu 16.04 自带功能远程登录到同事的电脑时,提示如下错误: This file server type is not recognized 百度一下,得知,缺少必要的文件,安装后 ...

  8. datepicker 属性设置 以及方法和事件

    DatePicker支持鼠标点选日期,同时还可以通过键盘控制选择: page up/down - 上一月.下一月 ctrl+page up/down - 上一年.下一年 ctrl+home - 当前月 ...

  9. npm dev run 报错

    解决办法: npm run dev --port 8088 Error: listen EACCES 0.0.0.0:8080at Object.exports._errnoException (ut ...

  10. 驳2B文 "我为什么放弃Go语言"

      此篇文章流传甚广, 其实里面没啥干货, 而且里面很多观点是有问题的. 这个文章在 golang-china 很早就讨论过了. 最近因为 Rust 1.0 和 1.1 的发布, 导致这个文章又出来毒 ...