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模板使用补充的更多相关文章

  1. artTemplate模板引擎学习实战

    在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...

  2. artTemplate模板引擎

    artTemplate模板引擎         <li>索引 {{i + 1}} :{{value}}</li>     {{/each}} </ul> </ ...

  3. 高性能前端 art-template 模板

    官网: https://aui.github.io/art-template/zh-cn/index.html nodejs 服务器端使用 第一步: 引入 art-template 的包 npm in ...

  4. django的小操作,查询效率up, 引用art-template模板+djangorestframework

    Part1: 提高查询效率newses = News.objects.select_related('category', 'author').get(id=1) # category和author字 ...

  5. thinkjs——art-template模板用法

    前言: 概述之前先附上此正式版介绍地址:https://github.com/aui/artTemplate  or http://www.jq22.com/jquery-info1097,可以再看下 ...

  6. ajax请求数据填充表格———使用art-template模板提高效率

    一.为什么要用art-template模板 在实习的一次项目中,因为需求中展示表格的字段有很多个,后端返回的也是json数据,这时候如果还是使用之前的字符串拼接,这样会开发得比较慢,而且容易出错,而且 ...

  7. nodejs中引入art-template模板

    使用Webstorm创建nodejs express应用时,默认使用的是jade或者ejs模板,对于不习惯这两种模板语法的人来说确实不是很方便.没关系,这里我们使用art-template模板引擎,使 ...

  8. koa art-template模板引擎的使用

    art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...

  9. Node学习之(第三章:art-template模板引擎的使用)

    前言 大家之前都有使用过浏览器中js模板引擎,其实在Node.js中也可以使用模板引擎,最早使用模板引擎的概念是在服务端新起的. art-template art-template是一款高性能的Jav ...

随机推荐

  1. iOS状态栏标志

    [UIApplication sharedApplication].networkActivityIndicatorVisible = YES; //显示 [UIApplication sharedA ...

  2. CSS3边框圆角知识

    <div class="item" data-brief="整圆"> <div class="border-radius" ...

  3. 教程-Delphi中的GExperts搜索代码快捷键

    Shift+Ait+S  打开搜索 Ctrl+Ait+R 打开上次搜索结果

  4. SSL的单向认证和双向认证

    原文地址:http://alvinhu.com/blog/2013/06/20/one-way-and-two-way-ssl-authentication/?utm_source=tuicool&a ...

  5. ssdfd

    http://www.phpweb.net/ http://wenku.baidu.com/view/6044c67c27284b73f242506b.htmlhttp://www.jb51.net/ ...

  6. 微信小程序 - IOS 仿饿了么"我的",下拉橡皮筋效果

    这个需求是在wepy交流群里有群友提到的. 一个小花样. 注册mixins /** * IOS专用 顶部下拉橡皮筋效果 * 安卓的Page在到达顶部的时候,不能继续下拉...略过 * * 效果见 饿了 ...

  7. ardunio I2C

    I2C总线定义I2C(‘intel’ -Integrated Circuit)总线是一种由PHILIPS公司开发的两线式串行总线,用于连接微控制器及其外围设备.在主从通信中,可以有多个I2C总线器件同 ...

  8. Spring Framework 官方文档学习(四)之Validation、Data Binding、Type Conversion

    本篇太乱,请移步: Spring Framework 官方文档学习(四)之Validation.Data Binding.Type Conversion(一) 写了删删了写,反复几次,对自己的描述很不 ...

  9. OGNL支持各种纷繁复杂的表达式

    OGNL支持各种纷繁复杂的表达式.但是最最基本的表达式的原型,是将对象的引用值用点串联起来,从左到右,每一次表达式计算返回的结果成为当前对象,后面部分接着在当前对象上进行计算,一直到全部表达式计算完成 ...

  10. Unity3D 新版粒子系统 (Shuriken)

    Shuriken粒子系统是继Unity3.5版本之后推出的新版粒子系统,它采用了模块化管理,个性化的粒子模块配合粒子曲线编辑器使用户更容易创作出各种兵分复杂的粒子效果. 创建一个粒子系统的方式有两种: ...