artTemplate模板使用补充
1、 添加辅助方法
``template.helper(name, callback)``辅助方法一般用来进行字符串替换,如 UBB 替换、脏话替换等。
例如扩展一个UBB替换方法:
template.helper('$ubb2html', function (content) {
return content
.replace(/\[b\]([^\[]*?)\[\/b\]/igm, '<b>$1</b>')
.replace(/\[i\]([^\[]*?)\[\/i\]/igm, '<i>$1</i>')
.replace(/\[u\]([^\[]*?)\[\/u\]/igm, '<u>$1</u>')
.replace(/\[url=([^\]]*)\]([^\[]*?)\[\/url\]/igm, '<a href="$1">$2</a>')
.replace(/\[img\]([^\[]*?)\[\/img\]/igm, '<img src="$1" />');
});
在模板中的使用方式:
<%=$ubb2html(content) %>
注意:引擎不会对辅助方法输出的 HTML 字符进行转义。
2、嵌入子模板
``<%include(id, [data])%>``语句可以嵌入子模板,其中第二个参数是可选的,它默认传入当前的数据。
3、不转义HTML
模板引擎默认数据包含的 HTML 字符进行转义以避免 XSS 漏洞,若不需要转义的地方可使用``==``。
例如:<%==value%>
若需要关闭默认转义,可以设置``template.isEscape = false``。
4、 在js中存放模板
var source =
'<ul>'
+ '<% for (var i = 0; i < list.length; i ++) { %>'
+ '<li>索引 <%= i + 1 %> :<%= list[i] %></li>'
+ '<% } %>'
+ '</ul>'; var data = {
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
}; var render = template.compile(source);
var html = render(data);
document.getElementById('content').innerHTML = html;
5、模板编码规范
1、不能使用 javascript 关键字作为模板变量(包括 ECMA5 严格模式下新增的关键字):
2、模板运行在沙箱中,内部无法访问外部变量,除非给模板定义辅助方法。例如: template.helper('Math', Math)
所有演示例子:http://aui.github.com/artTemplate/demo/index.html
本文章内容摘抄自:http://www.lvtao.net/web/javascript-artTemplate.html
artTemplate模板使用补充的更多相关文章
- artTemplate模板引擎学习实战
在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...
- artTemplate模板引擎
artTemplate模板引擎 <li>索引 {{i + 1}} :{{value}}</li> {{/each}} </ul> </ ...
- 高性能前端 art-template 模板
官网: https://aui.github.io/art-template/zh-cn/index.html nodejs 服务器端使用 第一步: 引入 art-template 的包 npm in ...
- django的小操作,查询效率up, 引用art-template模板+djangorestframework
Part1: 提高查询效率newses = News.objects.select_related('category', 'author').get(id=1) # category和author字 ...
- thinkjs——art-template模板用法
前言: 概述之前先附上此正式版介绍地址:https://github.com/aui/artTemplate or http://www.jq22.com/jquery-info1097,可以再看下 ...
- ajax请求数据填充表格———使用art-template模板提高效率
一.为什么要用art-template模板 在实习的一次项目中,因为需求中展示表格的字段有很多个,后端返回的也是json数据,这时候如果还是使用之前的字符串拼接,这样会开发得比较慢,而且容易出错,而且 ...
- nodejs中引入art-template模板
使用Webstorm创建nodejs express应用时,默认使用的是jade或者ejs模板,对于不习惯这两种模板语法的人来说确实不是很方便.没关系,这里我们使用art-template模板引擎,使 ...
- koa art-template模板引擎的使用
art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...
- Node学习之(第三章:art-template模板引擎的使用)
前言 大家之前都有使用过浏览器中js模板引擎,其实在Node.js中也可以使用模板引擎,最早使用模板引擎的概念是在服务端新起的. art-template art-template是一款高性能的Jav ...
随机推荐
- CSS3背景总结
值 描述 CSS background-color 规定要使用的背景颜色. 1 background-position 规定背景图像的位置. 1 background-size 规定背景图片的尺寸. ...
- Hystrix的原理与使用
转载自:https://segmentfault.com/a/1190000005988895 http://blog.csdn.net/xiaoyu411502/artic ...
- [转]C++中的三种继承public,protected,private
链接:http://www.cnblogs.com/BeyondAnyTime/archive/2012/05/23/2514964.html
- 转:Linux下which、whereis、locate、find 命令的区别
我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有时很长时间不会用到,当要用的时候经常弄混了,所以放到这里方便使用. which ...
- Android——初学
- php5共存php7
PHP7与PHP5共存于CentOS7 原文参考 原理 思路很简单:PHP5是通过yum安装的在/usr/,套接字在/var/run/php-fpm.socket,PHP7自己编译装在/usr/loc ...
- Oracle 错误:ORA-06413: Connection not open 解决办法
http://blog.csdn.net/neso520/article/details/6037411 ——————————————————————————————————————————————— ...
- ubuntu14.04中安装jdk
1. 下载JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 将下载的 .g ...
- 一个RESTful服务,用来定位运行在AWS地区(Region)中的中间层服务
Eureka 一个RESTful服务,用来定位运行在AWS地区(Region)中的中间层服务.由两个组件组成:Eureka服务器和Eureka客户端.Eureka服务器用作服务注册服务器.Eureka ...
- 【cf489】D. Unbearable Controversy of Being(暴力)
http://codeforces.com/contest/489/problem/D 很显然,我们只需要找对于每个点能到达的深度为3的点的路径的数量,那么对于一个深度为3的点,如果有a种方式到达,那 ...