使用js、jquery动态生成html会非常麻烦。现在的模板引擎可以很简单的解决这个问题。比如腾讯出的art-Template

官网:http://aui.github.io/art-template/zh-cn/

下载:template-web.js(gzip: 6kb)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. </head>
  7. <body>
  8. <!--用于展示模版的位置-->
  9. <div id="area"></div>
  10. <script src="http://aui.github.io/art-template/js/template-engines/template-web.js"></script>
  11. <!--用于存放模版-->
  12. <script id="template" type="text/html">
  13. <div>
  14. <!--升级后:Template upgrade: each object as value index -> each object value index -->
  15. {{each content value }}
  16. <h1>{{ value.province }}</h1>
  17. {{each value.city city }}
  18. <p>{{city}}</p>
  19. {{/each }}
  20. {{/each }}
  21. </div>
  22. </script>
  23. <!--用于渲染模版-->
  24. <script>
  25. var data = {
  26. content: [
  27. { province: '四川', city: ['成都', '绵阳', '自贡'] },
  28. { province: '广东', city: ['广州', '东莞', '佛山'] },
  29. { province: '海南', city: ['海口', '三亚'] }
  30. ]
  31. };
  32. var html = template('template', data);
  33. document.getElementById('area').innerHTML = html;
  34. </script>
  35. </body>
  36. </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. 如何能让MAC和PC都能读写移动硬盘

    Macbook Pro 移动硬盘 希捷硬盘就不用,有专业适用于苹果的软件. 1.在“LaunchPad”中找到并打开“磁盘工具”,在“磁盘工具”中可以看到移动硬盘的几个分区 2.选择一个分区后,选择“ ...

  2. python 各种推导式玩法

    推导式套路 除了最简单的列表推导式和生成器表达式,其实还有字典推导式.集合推导式等等. 下面是一个以列表推导式为例的推导式详细格式,同样适用于其他推导式. variable = [out_exp_re ...

  3. Spring Boot中的initializers的作用分析

    在SpringApplication的实例属性中有一个初始器的属性:List<ApplicationContextInitializer<?>> initializers ,这 ...

  4. Windows PowerShell 入門(5)-制御構文

    Windows PowerShellにおける制御構文について学びます.数ある制御構文の中でもSwitch文は.他の言語に比べ豊富な機能が用意されています. 対象読者 Windows PowerShel ...

  5. [转]JS根据useAgent来判断edge, ie, firefox, chrome, opera, safari 等浏览器的类型及版本

    js根据浏览器的useAgent来判断浏览器的类型 userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. JavaScript语法:navigator.use ...

  6. 7-Links

    Use the <a> element to define a link Use the href attribute to define the link address Use the ...

  7. Spring Boot (一): Spring Boot starter自定义

    前些日子在公司接触了spring boot和spring cloud,有感于其大大简化了spring的配置过程,十分方便使用者快速构建项目,而且拥有丰富的starter供开发者使用.但是由于其自动化配 ...

  8. Java红黑树详谈

    定义 红黑树的主要是想对2-3查找树进行编码,尤其是对2-3查找树中的3-nodes节点添加额外的信息.红黑树中将节点之间的链接分为两种不同类型,红色链接,他用来链接两个2-nodes节点来表示一个3 ...

  9. Modbus库开发笔记之十:利用协议栈开发Mosbus RTU Slave应用

    上一节我们使用协议占开发了一个Modbus TCP Server应用.接下来我们使用协议栈在开发一个基于串行链路的Mosbus RTU Slave应用. 根据前面对协议栈的封装,我们需要引用Modbu ...

  10. socket通讯---TcpClient

    IPHostEntry ipe = Dns.GetHostEntry(Dns.GetHostName()); IPAddress ipa = ipe.AddressList[0]; System.Ne ...