ArtTemplate 使用笔记
新一代 javascript 模板引擎:artTemplate-3.0
下载地址：https://github.com/aui/artTemplate快速上手请参考：https://github.com/aui/artTemplate
通过阅读artTemplate原文，基本上都会运用了，不再重述。
主要的是如何运用数组
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AtrTemplate</title>
</head>
<body>
<div id="content"></div> <script src="js/template-native.js"></script>
<script id="test" type="text/html"> <%for( i = 0; i < content.length; i++) {%>
<h1><%=content[i].title%></h1>
<p>条目内容 : <%=content[i].list%></p>
<%}%> </script> <script> var data = {
content : [
{
title: "artTemplate",
list: "新一代 javascript 模板引擎",
},
{
title: "特性",
list: "性能卓越，执行速度快"
}
]
};
var html = template('test',data); document.getElementById("content").innerHTML = html;
</script>
</body>
</html>
深层运用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AtrTemplate -- 简介</title>
</head>
<body>
<div id="content"></div> <script src="js/template-native.js"></script>
<script id="listtemp"> </script>
<script id="test" type="text/html"> <%for( i = 0; i < content.length; i++) {%>
<h1><%=content[i].title%></h1>
<ul>
<%for( j = 0; j < content[i].list.length; j++) {%>
<li> <%=content[i].list[j]%></li>
<%}%>
</ul>
<%}%> </script> <script> var data = {
content : [
{
title: "artTemplate",
list: ["新一代 javascript 模板引擎"]
},
{
title: "特性",
list: [
"性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍",
"支持运行时调试，可精确定位异常模板所在语句",
" 对 NodeJS Express 友好支持",
"安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）",
" 支持include语句",
"可在浏览器端实现按路径加载模板",
"支持预编译，可将模板转换成为非常精简的 js 文件",
"模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选",
"支持所有流行的浏览器"
]
}
]
};
var html = template('test',data); document.getElementById("content").innerHTML = html;
</script>
</body>
</html>
ArtTemplate 使用笔记的更多相关文章
- javascript模板引擎之artTemplate 学习笔记
<div id="content"></div><div id="content1"></div><h1& ...
- 项目中使用的artTemplate笔记
1.注意数据格式为 var results = { data:[ {name:'xiaoming',age:'18'},{name:'xiaohong',age:'18'},{name:'xiaogo ...
- Node入门教程(13)第十一章：mocha单元测试+should断言库+istanbul覆盖率测试+art-template
声明:以下为老马的全栈视频教程的笔记,如果需要了解详情,请直接配合视频学习.视频全部免费,视频地址:https://ke.qq.com/course/294595?tuin=1eb4a0a4 node ...
- git-简单流程（学习笔记）
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- NET Core-学习笔记（三）
这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...
随机推荐
- C# 向批处理文件输入字符
先记录个无关标题哒~ 刚刚学习用C#,在用VS进行图形界面编程时,点界面中添加的空间,VS界面右侧会出现该控件的属性页,但是这个属性页并不全, 只列出了部分重要的属性,一开始还以为是没有对应的属性方法 ...
- html 作业1
<body bgcolor="#000000" topmargin="200px" leftmargin="200px" text=& ...
- ASP.NET MVC3快速入门——第五节、从控制器访问模型中的数据
5.1 从控制器访问模型中的数据在本节中,我们将创建一个新的MoviesController类,并且书写代码来获取数据库中的数据,并通过视图模板来显示在浏览器中.鼠标右击Controller文件夹,点 ...
- QThread居然有一个setEventDispatcher函数
http://doc.qt.io/qt-5/qthread.html#setEventDispatcher 难道QtService里不能执行tr函数,是需要手动安装事件发送器?
- 转:修改类不重启tomcat 自动加载项目
可以修改类不用重启Tomcat加载整个项目(手工启动) 配置reloadable=true(自动重载) 使用Debug模式,前提是仅限于局部修改.(修改类不用重启--热加载) (rel ...
- haproxy简单负载均衡搭建
最近对负载均衡进行搭建具体方法如下: haproxy 修改部分(haproxy-cfg.cfg) global daemon maxconn 4500 defaults mode http timeo ...
- Longest Valid Parentheses 解答
Question Given a string containing just the characters '(' and ')', find the length of the longest v ...
- hdu3095-Eleven puzzle(双向搜索+哈希)
Partychen invents a new game named “Eleven Puzzle” .Just like the classic game “Eight Puzzle”,but th ...
- ios 导航栏和旋屏
1,状态栏(UIStatusBar) http://my.oschina.net/shede333/blog/304560 2,visibleViewController和topViewControl ...
- LVM（1）
DM: DM: Device Mapper 逻辑设备 RAID, LVM2 DM: LVM2 快照 多路径