摘要:

  aTpl.js是一款模板插件,该插件支持ie5+,chrome等浏览器以及移动端浏览器,支持for和if语法,以及表达式。最近对aTpl.js模板插件增加了新的功能,支持字符串模板,同时增加了模板缓存功能。

项目地址:https://github.com/baixuexiyang/aTpl

性能测试:http://baixuexiyang.github.io/aTpl/doc/perform.html

实例:

var data = {
name: '测试',
sex: 1,
contact: [{
name: '张三',
sex: 1
}, {
name: '李四',
sex: 2
}]
};
var temp = "{{@ for(var i = 0, _l = aTpl.contact.length; i < _l; i++){ }}\
{{@ if(aTpl.contact[i].name==='张三' ) { }}\
<li>\
<span>姓名:{{ aTpl.contact[i].name + '条件输出' }}</span>\
<span>性别:{{ aTpl.contact[i].sex===1 ? '男': '女' }}</span>\
</li>\
{{@ } else { }}\
<li>\
<span>姓名:{{ aTpl.contact[i].name }}</span>\
<span>城市:{{ aTpl.contact[i].sex===1 ? '男': '女' }}</span>\
</li>\
{{@ } }} {{@ } }}";
aTpl.template(temp).render(data, function(html) {
document.getElementById('demo').innerHTML = html;
});

模板插件aTpl.js新增功能的更多相关文章

  1. javascript模板插件amaze.js

    摘要: 最近在开发项目时,异步接口需要前端渲染数据,js拼接太低级,必然要用模板插件.之前用过基于jQuery的和juicer等插件,考虑到以后公司项目上的统一,移动端和pc端上的统一,以及可维护性, ...

  2. 模板插件aTpl

    摘要: 前面给大家分享了一款js模板插件,后来经过完善推荐给大家.该插件支持ie5+,chrome等浏览器以及移动端浏览器,支持for和if语法,以及表达式. 项目地址:https://github. ...

  3. jquery.pagination.js 新增 首页 尾页 功能

    jquery.pagination.js 新增 首页 尾页 功能 废话不多说,直接上修改后的代码,修改部分已经用 update 注释包含 17-20行 99-103行 141-145行 /** * T ...

  4. cloudstack4.4新增功能前瞻

    cloudstack4.4.0新功能前瞻 转载请注明地址:http://blog.csdn.net/zt689/article/details/37698989 1.   cloudstack4.4. ...

  5. select 自定义样式插件 selectize.js

    [特别推荐]几款极好的 JavaScript 下拉列表插件   表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让 ...

  6. .NET Framework3.0/3.5/4.0/4.5新增功能摘要

    Microsoft .NET Framework 3.0 .NET Framework 3.0 中增加了不少新功能,例如: Windows Workflow Foundation (WF) Windo ...

  7. hadoop2.6.0汇总:新增功能最新编译 32位、64位安装、源码包、API下载及部署文档

    相关内容: hadoop2.5.2汇总:新增功能最新编译 32位.64位安装.源码包.API.eclipse插件下载Hadoop2.5 Eclipse插件制作.连接集群视频.及hadoop-eclip ...

  8. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  9. 模板引擎mustache.js

    Javascript模板引擎mustache.js详解   阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...

随机推荐

  1. 直接修改托管堆栈中的type object pointer(类型对象指针)

    都知道.NET是一个强对象类型的框架. 那么对于对象类型又是怎么确定的呢. 最初的我简单认为数据的类型就是定义时字段的类型修饰决定的(回来发现这种观点是绝对错误的) 我们知道引用对象存储在托管堆栈中, ...

  2. 第五章 与众不同的this

    我们来看下面的代码: ①var name="windows"; function myfun() //定义一个函数myfun { console.log("I'm &qu ...

  3. 云计算之路-阿里云上:Wireshark抓包分析一个耗时20秒的请求

    这篇博文分享的是我们针对一个耗时20秒的请求,用Wireshark进行抓包分析的过程. 请求的流程是这样的:客户端浏览器 -> SLB(负载均衡) -> ECS(云服务器) -> S ...

  4. Javascript基础系列之(三)数据类型 (类型转化)

    所有语言都有类型转化的能力,javascript也不例外,它也为开发者提供了大量的类型转化访法,通过全局函数,可以实现更为复杂的数据类型. var a = 3; var b = a + 3; var ...

  5. 图解NodeJS【基于事件、回调的单线程高性能服务器】原理

    刚开始了解Node感觉很吊,各种说高性能,可是一直不理解为什么单线程会比多线程快?为什么异步IO比非阻塞IO快?因此,本篇在阅读相关书籍后,根据自己的理解,整理此文,如有错误,仅代表理论不精,必当修改 ...

  6. CSS3——动画效果

    CSS3动画在Style里面就实现了以往我们用JQ写的动画效果,着实简便了不少~ 简单Demo: html代码: <div id="dv1"></div> ...

  7. at org.apache.catalina.loader.WebappClassLoader.loadClass问题处理

    在连接oracle数据库时,正常的java application可以连接,但是到javabean web中就出错,说是Class.forName(dirver)找不到驱 动,问题是,我将oracle ...

  8. c# 多线程 调用带参数函数

    线程操作主要用到Thread类,他是定义在System.Threading.dll下.使用时需要添加这一个引用.该类提供给我们四个重载的构造函数(以下引自msdn).       Thread (Pa ...

  9. Xcode7企业版打包

    今天才发现Xcode7企业账号打包竟然和以前稍微不一样了,一时手残,先把公司服务器以前的ipa包删了,吓得我的小心脏呢 首先选中然后选archive然后点export然后然后选中include man ...

  10. Svn-如何清除eclipse中保存的svn用户名和密码

    1. 查看你的Eclipse中使用的是什么SVN Interface windows > prefeSence > Team > SVN #SVN Interface 2. 如果是用 ...