模板引擎: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 ...
随机推荐
- CSS3初学篇章_1
CSS 层叠样式表 不同的浏览器需要不同的前缀,虽然目前最新版本的浏览器的不需要,但为了向下兼容,前缀还是少不了. 前缀 浏览器 -webkit chrome和safari -moz fire ...
- bind绑定事件，摁回车键提交查询，点击查询也可以提交查询
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- MySQL Cluster 配置详细介绍
在上篇文章已经详细说明了MySQL Cluster搭建与测试,现在来说说详细的配置参数.在MySQL Cluster 环境的配置文件 config.ini 里面,每一类节点都有两个(或以上)的相应配置 ...
- sql替换指定字段指定字符串
REPLACE ('字段','string','newstring') UPDATE dw_site SET username =REPLACE (username,'凯鋆','韩优')
- python 安装mysql-python模块
方式一 使用yum安装 # yum install MySQL-python 方式二 使用pip 安装 # pip install mysql-python 使用pip方式安装需要提前安装如下依赖 m ...
- Java内存泄露及性能调优实例
内存泄漏及解决方法 1)系统崩溃前的一些现象 每次垃圾回收的时间越来越长,由之前的10ms延长到50ms左右,FullGC的时间也有之前的0.5s延长到4.5s:FullGC的次数越来越多,最频繁时隔 ...
- Java Basic - Encapsulation
*** 封装 *** 面向对象特征 - 封装 封装的基本原则 将你的实例变量标记为私有的,比如提供公有的get与set方法来控制存取动作 有些get和set 可能什么事情也没做, 只是把值设给变量而已 ...
- JS之获取样式
基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- JMeter学习-020-JMeter 监听器之【聚合报告】错误率、吞吐量、传输速率实例计算
上文 对聚合报告的结果字段进行了概要的讲述释义,同时对吞吐量.传输速率.分位数等进行了详细的阐述,此文针对上文中描述的吞吐量及传输速率的计算进行详细的实例计算演示. 多不闲述,直入主题! 实际操作步骤 ...
- favicon.ico的制作
1.选取需要的图片(jpg的格式等) 2.在网上搜索favicon.ico的制作,将jpg转为ico 3.在html中输入<link rel="shortcut icon" ...