新一代 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 使用笔记的更多相关文章

  1. javascript模板引擎之artTemplate 学习笔记

    <div id="content"></div><div id="content1"></div><h1& ...

  2. 项目中使用的artTemplate笔记

    1.注意数据格式为 var results = { data:[ {name:'xiaoming',age:'18'},{name:'xiaohong',age:'18'},{name:'xiaogo ...

  3. Node入门教程(13)第十一章:mocha单元测试+should断言库+istanbul覆盖率测试+art-template

    声明:以下为老马的全栈视频教程的笔记,如果需要了解详情,请直接配合视频学习.视频全部免费,视频地址:https://ke.qq.com/course/294595?tuin=1eb4a0a4 node ...

  4. git-简单流程(学习笔记)

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  5. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  7. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  8. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  9. NET Core-学习笔记(三)

    这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...

随机推荐

  1. NAS4Free 安装配置(四)配置硬盘

    配置硬盘 磁盘管理 进入磁盘管理界面:Disks|Management 磁盘管理 点击Import disks导入磁盘 把第4个4G的DOM盘删掉,因为我们不在这个盘上存放数据 点Apply chan ...

  2. 使用Hexo搭建GitPage

    资料: hexo官方文档:https://hexo.io/zh-cn/docs/ jekyll官方文档:http://jekyll.com.cn/docs/home/ 简介: 使用hexo和jekyl ...

  3. VC-关于VC++ 6.0的那些事儿

    Microsoft Visual C++,(简称Visual C++.MSVC.VC++或VC)微软公司的C++开发工具,具有集成开发环境,可提供编辑C语言,C++以及C++/CLI等编程语言.VC+ ...

  4. 错误:指定的任务可执行文件位置 D:\Android\platform-tools\aapt.exe 无效

    android-apt-compiler: Cannot run program "D:\android-sdk\platform-tools\aapt 装上IntelliJ IDEA /下 ...

  5. 完整的多项匹配tomcat access日志的正则

    <pre name="code" class="html"><pre name="code" class="ht ...

  6. 05_Elasticsearch 单模式下API的增删改查操作

    05_Elasticsearch 单模式下API的增删改查操作 安装marvel 插件: zjtest7-redis:/usr/local/elasticsearch-2.3.4# bin/plugi ...

  7. 图片延迟加载scrollLoading.js应用

     <ul>                     <li><a href="http://news.qq.com/" target="_b ...

  8. MediaInfo源代码分析 1:整体结构

    MediaInfo 用来分析视频和音频文件的编码和内容信息,是一款是自由软件 (免费使用.免费获得源代码).之前编程的时候,都是直接调用它提供的Dll,这次突然来了兴趣,想研究一下它内部究竟是怎么实现 ...

  9. 【转】第一个MiniGUI程序:模仿QQ界面

    最近几天在学MiniGui,最好的学习方法就是实践,先写个练练笔.其实只是一个界面,不知道什么时候才能真正写个完整的程序.初次写GUI程序,感觉写得不好,还请高手来指教. //============ ...

  10. Eclipse代理设置

    这段时间公司实行代理上网,不仅通过浏览器上网须要不停的输入username和password,在本地调试程序时候Eclipse居然也弹出框让输入username和password. 如图: 解决的方法 ...