template.js的使用心得
template.js是一款JavaScript模板引擎，用来渲染页面的。
原理：提前将Html代码放进编写模板
<script id="tpl" type="text/html"></script>
中，当需要渲染页面时，在js里这样调用：
var tpl = document.getElementById('tpl').innerHTML; template(tpl, data});
template.js可以使用命令安装，也可以在git上面下载：https://github.com/yanhaijing/template.js
template.js开始标签默认为<%，结束标签默认为%>，显示数据为<%= i %>。
下面是使用template.js v0.7.1版本的实验结果：
1、遍历数组显示数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wp"></div>
<script id="tpl" type="text/html">
<ul>
<%for(var i in items){%>
<li>
name:<%=items[i].name%> val:<%=items[i].val%>
</li>
<%}%>
</ul>
</script>
<script src="../template.js"></script>
<script>
var data={
items:[{'name':'名字一','val':'数据一'},
{'name':'名字二','val':'数据二'},
{'name':'名字三','val':'数据三'},
{'name':'名字四','val':'数据四'}
]
}
var html = template(document.getElementById('tpl').innerHTML,data);
document.getElementById('wp').innerHTML = html;
</script>
</body>
</html>
2、模拟子模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟子模版</title>
</head>
<body>
<div id="wp"></div> <script id="tpl" type="text/html">
<h1>国内新闻</h1>
<%:=newsListTpl({list: list1, tpl: childTpl})%>
<h1>国际新闻</h1>
<%:=newsListTpl({list: list2, tpl: childTpl})%>
</script> <script id="child-tpl" type="text/html">
<ul>
<% for(i in list){ %>
<li><%=list[i].title%> <%=list[i].desc%></li>
<% } %>
</ul>
</script>
<script src="../template.js"></script>
<script>
var childTpl = template(document.getElementById('child-tpl').innerHTML);
var data={
newsListTpl: childTpl,
list1: [
{title: '国内标题1', desc: '国内描述1'},
{title: '国内标题2', desc: '国内描述2'},
{title: '国内标题3', desc: '国内描述3'},
],
list2: [
{title: '国际标题1', desc: '国际描述1'},
{title: '国际标题2', desc: '国际描述2'},
{title: '国际标题3', desc: '国际描述3'},
],
}
console.log(data);
var html = template(document.getElementById('tpl').innerHTML,data);
document.getElementById('wp').innerHTML = html; </script>
</body>
</html>
3、子模板里面的子模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟子模版</title>
</head>
<body>
<div id="wp"></div> <script id="tpl" type="text/html">
<h1>国内新闻</h1>
<%:=listTpl({list: list1, tpl: subChildTpl})%>
<h1>国际新闻</h1>
<%:=listTpl({list: list2, tpl: subChildTpl})%>
</script> <script id="child-tpl" type="text/html">
<ul>
<% for(i in list){ %>
<%:=tpl(list[i])%>
<% } %>
</ul>
</script>
<script id="sub-child-tpl" type="text/html">
<li>
<%=title%> <%=desc%>
</li>
</script>
<script src="../template.js"></script>
<script>
var childTpl = template(document.getElementById('child-tpl').innerHTML);
var subChildTpl = template(document.getElementById('sub-child-tpl').innerHTML);
var data={
listTpl: childTpl,
newsChildTpl:subChildTpl,
list1: [
{title: '国内标题1', desc: '国内描述1'},
{title: '国内标题2', desc: '国内描述2'},
{title: '国内标题3', desc: '国内描述3'},
],
list2: [
{title: '国际标题1', desc: '国际描述1'},
{title: '国际标题2', desc: '国际描述2'},
{title: '国际标题3', desc: '国际描述3'},
],
}
console.log(data);
var html = template(document.getElementById('tpl').innerHTML,data);
document.getElementById('wp').innerHTML = html; </script>
</body>
</html>
4.foreach循环获取数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wp"></div>
<script id="tpl" type="text/html">
<ul>
<%items.forEach(function(item){%>
<li><%=item.name%> <%=item.val%></li>
<%})%>
</ul>
</script>
<script src="../template.js"></script>
<script>
var data={
items:[{'name':'名字一','val':'数据一'},
{'name':'名字二','val':'数据二'},
{'name':'名字三','val':'数据三'},
{'name':'名字四','val':'数据四'}
]
}
var html = template(document.getElementById('tpl').innerHTML,data);
document.getElementById('wp').innerHTML = html;
</script>
</body>
</html>
5、registerFunction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wp"></div>
<script id="tpl" type="text/html">
<h5><%=selfFun()%></h5>
<h5><%=selfFun2()%></h5>
</script>
<script src="../template.js"></script>
<script>
template.registerFunction('selfFun', function () {
return '自创函数1'
});
template.registerFunction('selfFun2', function () {
return '自创函数2'
});
var html = template(document.getElementById('tpl').innerHTML,{});
document.getElementById('wp').innerHTML = html;
</script>
</body>
</html>
6、registerModifier
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wp"></div>
<script id="tpl" type="text/html">
<h5><%:up='newbie is ace'%></h5>
</script>
<script src="../template.js"></script>
<script>
template.registerModifier('up', function (str) {
return str.toUpperCase();
}); var html = template(document.getElementById('tpl').innerHTML,{});
document.getElementById('wp').innerHTML = html;
</script>
</body>
</html>
template.js的使用心得的更多相关文章
- jQuery.template.js 简单使用
之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...
- template.js遍历对象的写法
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟 ...
- 我是这样使用template.js来异步渲染数据的
总监的代码用的是define+module.exports,为了效率先没去了解那一块,在github上找了一款功能单一的template.js来使用 https://github.com/yanhai ...
- jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
- 出位的template.js 基于jquery的模板渲染插件
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
- javascript模板引擎template.js使用
到GitHub上下载template.js库.引入到页面 以type="text/html" 这样指定javascript类型的是一种javascript模板渲染方法,在实际项目中 ...
- artTemplate/template.js模板将时间戳格式化为正常的日期
1:引用<script type="text/javascript" src="../js/artTemplate/template.js">< ...
- template.js简单入门
template.js是一款开源的JavaScript模板引擎,用来渲染页面的. github地址 https://github.com/yanhaijing/template.js 下载templa ...
- JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引 ...
随机推荐
- nodejs promise深度解析
Promise本质上是一个容器,内部有一个执行函数,当promise对象New出来的时候,内部包裹的函数立即执行. V8引擎会将resolve和projeccted两个函数传递进来,resolved含 ...
- 【转】Keepalived+Tengine实现高可用集群
原文出处:http://502245466.blog.51cto.com/7559397/1301772 概述 近年来随着Nginx在国内的发展潮流,越来越多的互联网公司使用Nginx:凭Nginx的 ...
- Python中的global和nonlocal
在Python中,一个变量的scope范围从小到大分成4部分:Local Scope(也可以看成是当前函数形成的scope),Enclosing Scope(简单来说,就是外层函数形成的scope), ...
- Pipeline组测试说明
PIPELINE组测试报告 前言:我们组与学霸系统的其他两个小组共同合作开发,组成学霸系统的团体工作.作为学霸系统的一环,我们组起到承上启下的作用,因此,面向群体以及功能实现都是为给下一个组的工作做好 ...
- 20145214 《Java程序设计》第5周学习总结
20145214 <Java程序设计>第5周学习总结 教材学习内容总结 try和catch Java中所有错误都会被包装为对象,可以尝试try执行程序并捕捉catch代表错误的对象后做一些 ...
- java中对象和对象的引用
1.何谓对象? 在Java中有一句比较流行的话,叫做“万物皆对象”,这是Java语言设计之初的理念之一.要理解什么是对象,需要跟类一起结合起来理解.下面这段话引自<Java编程思想>中的一 ...
- ACM 第十九天
积性函数 积性函数线性筛,筛素数,u(n),欧拉函数: vis[]=vis[]=,mu[]=,phi[]=; ;i<=N;++i){ ,phi[i]=i-,prime[++cnt]=i; ,k= ...
- 《剑指offer》---丑数
本文算法使用python3实现 1. 问题1 1.1 题目描述: 把只包含因子2.3和5的数称作丑数(Ugly Number).判断一个数是否是丑数. 时间限制:1s:空间限制:32768K ...
- Java内存分配及垃圾回收机制
Java内存区域 1.内存区域 jvm运行时数据区域 程序计数器 Java虚拟机栈 本地方法栈 方法区 Java堆 大图 2.概念解释 程序计数器 线程私有的一块很小的内存空间,它是当前线程所执行 ...
- BZOJ 1050 旅行(并查集)
很好的一道题.. 首先把边权排序.然后枚举最小的边,再依次添加不小于该边的边,直到s和t联通.用并查集维护即可. # include <cstdio> # include <cstr ...