腾讯模板引擎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( ...
随机推荐
- 在ANGULAR的SERVICE中,哪种才是最基本的实现?(Provider)
今天刚好看到这一节. 节选一下,稍后,实操完成之后,会补上所有代码 Sometimes, it might be interesting to create configurable services ...
- nyoj_216_A problem is easy_201312051117
A problem is easy 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 When Teddy was a child , he was ...
- Java排序算法之冒泡、选择、插入、快速
JavaSort Java经典排序算法代码 2018-1-26更新:冒泡排序,选择排序,插入排序,快速排序 1. 冒泡排序 特点:效率低,实现简单 思想(从小到大排): 第1个数和第2个数比较,如果第 ...
- HDU 5288
//枚举因子,查找和i最近的左右是i因子的点即可. #include <iostream> #include <cstdio> #include <algorithm&g ...
- CSS之实现二级菜单动态出现
一直觉得二级菜单的出现效果仅仅有js才干控制.今天研究了一下阿里巴巴站点的首页,才发现,原来二级菜单的动态显示也能够使用CSS来控制,原来对CSS是静态的东西一直是误解它了,CSS也能够实现动态的效果 ...
- Android Gallery2源代码分析
打开图库中图片为什么从模糊变清晰 1. 有一点要明白,图片要进行显示,首先要先将图片进行decode,然后才干显示 2. 图片decode须要时间,越大的图片,细节越多的图片,那么它decode时间就 ...
- wordpress相关
事故:wordpress不论什么页面所有是404 not found,找不到不论什么页面. 解决:在nginx.conf中80port以下的凝视消除掉. location ~ \.php$ { ...
- 一个效果非常华丽的仿桌面APP,却胜似Launcher
开发Android APP的同学是否对于Launcher实现的绚丽效果而痴迷呢?什么.连Android Launcher是什么都不知道.好吧,拿起侬的手机.在解锁后的首页界面上左右滑动滑动,体验体验, ...
- ANDROID窗体管理服务实现机制和架构分析
一.功能 窗体管理是ANDROID框架一个重要部分,主要包含例如以下功能: )Z-ordered的维护 )窗体的创建.销毁 )窗体的绘制.布局 )Token管理,AppToken )活动窗体管理 ...
- js简单函数封装
//每index个字符插入一个str字符串 String.prototype.insertStrPerIndex =function(index,str){ if(this.length>ind ...