新一代 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. JavaScript可否多线程? 深入理解JavaScript定时机制（转载）

    说明:最近写 js 时需要用setinterval函数做定时操作,谁知道,刚开始后运行完好,但一段时间后他就抽风了,定时任务运行的时间间隔越来越短,频率加快,这是一个完全不能容忍的问题,带着一个可以出 ...

  2. WDCP LNMPA和LNMP 504 Gateway time-out错误的解决方法

    Nginx的特点是处理静态很给力,Apache的特点是处理动态很稳定,两者结合起来便是LNMPA,nginx处理前端,apache处理后端,这样处理静态会很快,处理动态会很稳定.当我以为安装完成以后便 ...

  3. (转)Autotrace工具使用——小工具，大用场

    监控SQL语句,获取执行计划和执行成本,是每个Oracle开发人员与DBA所必须具备的能力之一. 当Oracle彻底进入CBO时代,我们面对一种全新的局面.一方面,基于数据统计量的CBO优化器,让SQ ...

  4. HDU 4010 Query on The Trees(动态树)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4010 题意:一棵树,四种操作: (1)若x和y不在一棵树上,将x和y连边: (2)若x和y在一棵树上, ...

  5. qt捕获全局windows消息（使用QAbstractNativeEventFilter，然后注册这个类）

    qt  如何捕获全屏的鼠标事件,这个帖子上面主要讲述了下嵌入式qt怎么抓取系统级消息,不过从这篇文章中我也看到了希望,有个回复说winEventFilter支持这种方式,然后我就顺着这个线索找到了na ...

  6. Powershell变量的幕后管理

    Powershell变量的幕后管理 513 12月, 2011  在 Powershell  tagged 变量 / 类型 by Mooser Lee本文索引[隐藏]1修改变量的选项设置2激活变量的写 ...

  7. PowerShell因为在此系统中禁止执行脚本解决方法

    PowerShell因为在此系统中禁止执行脚本解决方法   在Powershell直接脚本时会出现: 无法加载文件 ******.ps1,因为在此系统中禁止执行脚本.有关详细信息,请参阅 " ...

  8. 阻碍android程序员发展的几个原因

    1应该少看网上的android开发相关技术帖子,一个是错误很多,表达也不清楚,很多都是拷贝来拷贝去的.二个是技术变迁快,很多都过时了,经常看android技术相关帖子,养成了一种惰性,遇到问题不是去看 ...

  9. 《Two Days DIV + CSS》读书笔记——CSS选择器

    1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...

  10. Javascript构造函数学习

    我们经常会用JS的构造函数实现Java语言中的继承,今天整理一下构造函数的相关属性及说明. 下面定义一个构造函数: function Person(name, sex, age) { this.nam ...