腾讯模板引擎template
template.js是一款JavaScript模板引擎,用来渲染页面的。
原理:提前将Html代码放进编写模板
script id="tpl" type="text/html"></script>
中,当需要渲染页面时,在js里这样调用:
var tpl = document.getElementById('tpl').innerHTML; template(tpl, data});
1、腾讯模板引擎基本用法。
html里面
<div id="wp"></div>
<script id="tpl" type="text/html">
<ul>
{{each list as value i}} <li>索引 {{i + 1}} :{{value}}</li> {{/each}}
</ul>
</script>
js里面
<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>
腾讯模板引擎template的更多相关文章
- JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引 ...
- javascript模板引擎template.render使用
<script type="text/javascript"> function test(){ //你的方法 } </script> 如上代码:通常我们见 ...
- javascript模板引擎template.js使用
到GitHub上下载template.js库.引入到页面 以type="text/html" 这样指定javascript类型的是一种javascript模板渲染方法,在实际项目中 ...
- 关于js模板引擎template的使用记录
引言 有一天在群里有一个人发了这么一个图片 看到这个就会发现2个问题,一个是后期如果html结构改变了,这一大块都要重写.还有一个就是写的时候自己都看不清,很容易出错. 然后还有一个人写的清楚一点,但 ...
- baiduTemplate.js 百度JS模板引擎
baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 先展示两个例子,然后说说对baidutemplate.js的理解,从而将这一工具加到个人百宝箱里. <script id ...
- js模板引擎用法
JavaScript模板引擎Template.js使用详解 作者:A_山水子农 字体:[增加 减小] 类型:转载 时间:2016-12-15我要评论 这篇文章主要为大家详细介绍了JavaScript模 ...
- Django基础,Day10 - template 模板引擎与路径设置
作为一个Web框架,Django需要一个方便的方式来生成动态的HTML.最常见的方法依赖于模板.模板包含所需的HTML输出的静态部分以及一些特殊的语法描述如何插入动态内容. Django框架后端默认支 ...
- 如何选择Javascript模板引擎(javascript template engine)?
译者 jjfat 日期:2012-9-17 来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...
- art template前端模板引擎
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
随机推荐
- Win8.1 Hyper-V 共享本机IP上网
公司的Win8.1自带了Hyper v,可是死活连接不到网络. 原因是公司只给每人分配一个局域网IP,而默认情况下Hyper-V的虚拟机会动态分配了一个没有经过MIS人员许可的IP…… 百度了N久解决 ...
- 1066N !最右边非零数
http://hi.baidu.com/nicker2010/item/4fa83c4c5050b3e5a4c066ec 另一个 Last non-zero Digit in N! Time Limi ...
- vs2005添加include lib文件目录
vs2005添加include lib文件目录 http://blog.sina.com.cn/s/blog_79489160010145wb.html 1. 添加编译所需要的 lib 文件 [解决方 ...
- [bzoj1040][ZJOI2008]骑士_树形dp_基环树_并查集
骑士 bzoj-1040 ZJOI-2008 题目大意:n个骑士,每个骑士有权值val和一个讨厌的骑士.如果一个骑士讨厌另一个骑士那么他们将不会一起出战.问出战的骑士最大atk是多少. 注释:$1\l ...
- Linux Container测试之block IO
简介 Linux Container是OS级别的虚拟化方案,它相比于一般的虚拟机没有了硬件模拟以及指令模拟,相比传统虚拟机具有更低的开销,因此可以应用到私有云之中.LXC目前的版本支持对memor ...
- EPEL reporsitory
在centos 5上yum install git的时候报错说没有git这个package. 这是因为centos的软件策略非常保守,因为它基本就是redhat企业版的copy.所以想在centos5 ...
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...
- <LeetCode OJ> 268. Missing Number
268. Missing Number Total Accepted: 31740 Total Submissions: 83547 Difficulty: Medium Given an array ...
- 向Java枚举类型中加入新方法
除了不能继承enum之外,可将其看做一个常规类.甚至能够有main方法. 注意:必须先定义enum实例.实例的最后有一个分号. 以下是一个样例:返回对实例自身的描写叙述,而非默认的toString返回 ...
- mysql-5.5 for linux源码安装
mysql-5.5 for linux源码安装 1.使用Yum安装依赖软件包 # yum install -y gcc gcc-c++ gcc-g77 autoconf automake bison ...