摘要:

  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. Google Map API key 获取方法

    要想使用google map api 必须从google网站上获取key之后才有权限使用,但是要想申请key必须要有证明书,也就是所谓的MD5.下面一步一步来说明: 步骤1: 如果你使用的是eclip ...

  2. 20145215《Java程序设计》第3周学习总结

    20145215<Java程序设计>第三周学习总结 教材学习内容总结 认识对象 类类型 在学习第三章的时候,我们知道Java可区分为基本类型和类类型两大类型系统,其中类类型也称为参考类型. ...

  3. jsoup抓取借书记录

    package tushuguan; import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; ...

  4. 初识 swift 封装轮播图

    一.简介 换了一家公司.换了一个环境刚开始来公司自然不能有一丝一毫的放松,每天即使是没有什么工作也是看看这个博客.那个源码.尽量让自己更充实.慢慢的开始写几篇博客记录下自己遇到的一些问题和解决方法.其 ...

  5. offsetWidth与scrollLeft

    有两个值一个是:scrollTop一个是scrollLeft第一个代表页面利用滚动条滚动到下方时,隐藏在滚动条上方的页面的高度:第二个代表页面利用滚动条滚动到右侧时,隐藏在滚动条左侧的页面的宽度 do ...

  6. 大型网站系统架构实践(六)深入探讨web应用集群Session保持

    原理 在第三,四篇文章中讲到了会话保持的问题,而且还遗留了一个问题,就是会话保持存在单点故障, 当时的方案是cookie插入后缀,即haproxy指负责分发请求,应用服务自行保持用户会话,如果应 用服 ...

  7. iOS - 视频循环播放

    录制完视频后,我们想在录制视频的预览层上无限循环播放我们的小视频,是不是很炫酷,这时候我们就有三中选择了:1.MPMoviePlayerController2.AVPlayer3.AVAssetRea ...

  8. ubuntu chmod 无法更改 文件夹权限 系统提示“不允许的操作 2、linux 如何修改只读文件 3、ubuntu安装

    1.ubuntu chmod 无法更改 文件夹权限 系统提示“不允许的操作 答案:需要超级用户权限 sudo 2.linux 如何修改只读文件 答案:可以使用chmod命令,为改文件提供其他的权限.u ...

  9. 每天一个linux命令(7):cp 命令

    cp 命令用来复制文件或者目录,是Linux系统中最常用的命令之一.一般情况下,shell会设置一个别名,在命令行下复制文件时,如果目标文件已经存在, 就会询问是否覆盖,不管你是否使用-i参数.但是如 ...

  10. java文件中文在MyEclipse中打开变成了乱码

    导入其他人的项目,出现乱码状况 以下是解决方案之一: