模板引擎:ArtTemplate 使用入门和简单的使用
下载地址：https://github.com/aui/artTemplate
快速上手请参考：https://github.com/aui/artTemplate
通过阅读artTemplate原文，基本上都会运用了，不再重述。
主要的是如何运用数组
例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>AtrTemplate</title>
6 </head>
7 <body>
8 <div id="content"></div>
9
10 <script src="js/template-native.js"></script>
11 <script id="test" type="text/html">
12
13 <%for( i = 0; i < content.length; i++) {%>
14 <h1><%=content[i].title%></h1>
15 <p>条目内容 : <%=content[i].list%></p>
16 <%}%>
17
18 </script>
19
20 <script>
21
22 var data = {
23 content : [
24 {
25 title: "artTemplate",
26 list: "新一代 javascript 模板引擎",
27 },
28 {
29 title: "特性",
30 list: "性能卓越，执行速度快"
31 }
32 ]
33 };
34 var html = template('test',data);
35
36 document.getElementById("content").innerHTML = html;
37 </script>
38 </body>
39 </html>
深层运用：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>AtrTemplate -- 简介</title>
6 </head>
7 <body>
8 <div id="content"></div>
9
10 <script src="js/template-native.js"></script>
11 <script id="listtemp">
12
13 </script>
14 <script id="test" type="text/html">
15
16 <%for( i = 0; i < content.length; i++) {%>
17 <h1><%=content[i].title%></h1>
18 <ul>
19 <%for( j = 0; j < content[i].list.length; j++) {%>
20 <li> <%=content[i].list[j]%></li>
21 <%}%>
22 </ul>
23 <%}%>
24
25 </script>
26
27 <script>
28
29 var data = {
30 content : [
31 {
32 title: "artTemplate",
33 list: ["新一代 javascript 模板引擎"]
34 },
35 {
36 title: "特性",
37 list: [
38 "性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍",
39 "支持运行时调试，可精确定位异常模板所在语句",
40 " 对 NodeJS Express 友好支持",
41 "安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）",
42 " 支持include语句",
43 "可在浏览器端实现按路径加载模板",
44 "支持预编译，可将模板转换成为非常精简的 js 文件",
45 "模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选",
46 "支持所有流行的浏览器"
47 ]
48 }
49 ]
50 };
51 var html = template('test',data);
52
53 document.getElementById("content").innerHTML = html;
54 </script>
55 </body>
56 </html>
模板引擎:ArtTemplate 使用入门和简单的使用的更多相关文章
- 后台模板引擎ejs与前台模板引擎artTemplate的简单介绍
动态网页是指前端页面当中的数据内容来源于后台数据库,前端的html代码会随着后台数据的变化而变化,是动态生成的.制作动态网页有两种方式,一种方式是在后台拿到前端的html模板,利用后台模板引擎(如ej ...
- js模板引擎--artTemplate
js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...
- JavaScript模板引擎artTemplate.js——结语
再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是 ...
- js模板引擎art-Template（以前的artTemplate）
使用js.jquery动态生成html会非常麻烦.现在的模板引擎可以很简单的解决这个问题.比如腾讯出的art-Template 官网:http://aui.github.io/art-template ...
- js模板引擎-art-template常用
art-template javascript 模板引擎 分为原生语法和简洁语法,本文主要是讲简洁语法 基础数据渲染 输出HTML 流程控制 遍历 调用自定义函数方法 子模板引入 基础数据渲染 一.引 ...
- JavaScript模板引擎artTemplate.js——如何引入模板引擎？
artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎？
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
- js模板引擎-art-template常用总结
art-template javascript 模板引擎,官网:https://github.com/aui/art-template 分为原生语法和简洁语法,本文主要是讲简洁语法 基础数据渲染 输出 ...
- js模板引擎-art-template常用总结（转）
原文:https://www.cnblogs.com/shiyou00/p/6841801.html art-template javascript 模板引擎,官网:https://github.co ...
随机推荐
- Jquery的优势
(1)轻量级.jQuery非常轻巧,采用Dean Edwards的Packer(http://dean.edwards.name/packer/)压缩后,只有不到30KB的大小,如果服务器端启用gzi ...
- Ajax Post 与 Get 实例
Ajax的POST实例,index.html <html> <head> <script type="text/javascript"> fun ...
- 微信公众号内H5调用微信支付国内服务商模式
最近在折微信公众号内H5用JSAPI调用微信支付,境内服务商版支付,微信支付给出的官方文档以及SDK不够详细,导至我们走了一些弯路,把他分享出来,我这边主要是用PHP开发,所以未加说的话示例都是PHP ...
- IOS第14天(1,UITabBarController的基本的使用)
**************HMAppDelegate.m - (BOOL)application:(UIApplication *)application didFinishLaunchingWit ...
- Elasticsearch学习笔记（一）
批量建索引: curl -s -XPOST 'localhost:9200/_bulk' --data-binary @documents.json 查看索引mappingmyindex/_mappi ...
- iOS系统提供开发环境下命令行编译工具：xcodebuild
iOS系统提供开发环境下命令行编译工具:xcodebuild[3] xcodebuild 在介绍xcodebuild之前,需要先弄清楚一些在XCode环境下的一些概念[4]: Workspace:简单 ...
- php导出数据到excel,防止身份证等数字字符格式变成科学计数的方法
而关于php的也有,但是大多都是用phpExcel导出的方法或者spreadsheet等类或者控件之类的导出方法,而我所在维护的系统却用很简单的方法,如下,网上很少有讲如何设置要导出数据的EXcel格 ...
- Python开发【第三章】：Python的文件操作
一.文件操作模式概述 1.打开文件的模式: r, 只读模式[默认] w,只写模式[不可读:不存在则创建:存在则删除内容:] a, 追加模式[不可读:不存在则创建:存在则只追加内容:] 2." ...
- [转] CentOS单独安装Apache Benchmark压力测试工具的办法
Apache安装包中自带的压力测试工具 Apache Benchmark(简称ab) 简单易用,这里就采用 ab作为压力测试工具了. 1.独立安装 ab运行需要依赖apr-util包,安装命令为: 1 ...
- on-my-zsh agnoster 主题设置问题
安装Menlo-Powerline字体补丁 https://gist.github.com/qrush/1595572/raw/417a3fa36e35ca91d6d23ac96107... 然后 c ...