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包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...
随机推荐
- 正式学习react(二)
今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css讲了module.loaders下关于 c ...
- IOS 保存图片至相册
IOS 保存图片至相册 应用中有时我们会有保存图片的需求,如利用UIImagePickerController用IOS设备内置的相机拍照,或是有时我们在应用程序中利用UIKit的 UIGraphi ...
- stm32通用定时器中断问题
在使用stm32的通用定时器定时中断的时候,发现定时器在完成初始化配置后,定时器UIF位会立刻置位,导致在使能中断后,程序会立刻进入定时器中断. 如果设计代码时不希望定时器配置完成后,立刻进入中断,可 ...
- 懂说话,让冲突、尴尬时刻都bye-bye
回忆一下自己从小到大的成长历程,你容不容易交到新朋友?在不熟悉的社交场合中,你是否也曾面临坐立难安.不知从何聊起的窘境?事实上,无论身处学校或社会,担任职务是基础或高阶,终其一生都会派上用场的能力,就 ...
- initEvent vs initMouseEvent
var evt = document.createEvent("MouseEvents");evt.initMouseEvent("click", true, ...
- hdu 4419 Colourful Rectangle
http://acm.hdu.edu.cn/showproblem.php?pid=4419 题意:给出3种颜色,重叠会生成新的颜色,然后有一些矩形,求出每种颜色的面积. 转化为二进制表示颜色:001 ...
- 全局函数的Result一定要每次都初始化,否则上次的结果会被保持到下一次继续使用
测试半天,原来是因为这个原因.下面例子中,Result:=''必须写,否则其结果会被累计,真是昏倒!! function MyPaths(tache: IXMLTaskType) : String; ...
- 【转】Ubuntu环境下SSH的安装及使用
原文网址:http://blog.csdn.net/netwalk/article/details/12952051 SSH是指Secure Shell,是一种安全的传输协议,Ubuntu客户端可以通 ...
- 【CDOJ931】Car race game(树状数组求逆序)
题目连接:http://acm.uestc.edu.cn/#/problem/show/931 OJ评判系统有些坑,不支持__int64以及输出的%I64d大家注意.全开long long也会TLE, ...
- 【HDU2122】Ice_cream’s world III(MST基础题)
2坑,3次WA. 1.判断重边取小.2.自边舍去. (个人因为vis数组忘记初始化,WA了3次,晕死!!) #include <iostream> #include <cstring ...