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的更多相关文章

  1. JavaScript模板引擎Template.js使用详解

    这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   template.js 一款 JavaScript 模板引 ...

  2. javascript模板引擎template.render使用

    <script type="text/javascript"> function test(){ //你的方法 } </script> 如上代码:通常我们见 ...

  3. javascript模板引擎template.js使用

    到GitHub上下载template.js库.引入到页面 以type="text/html" 这样指定javascript类型的是一种javascript模板渲染方法,在实际项目中 ...

  4. 关于js模板引擎template的使用记录

    引言 有一天在群里有一个人发了这么一个图片 看到这个就会发现2个问题,一个是后期如果html结构改变了,这一大块都要重写.还有一个就是写的时候自己都看不清,很容易出错. 然后还有一个人写的清楚一点,但 ...

  5. baiduTemplate.js 百度JS模板引擎

    baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 先展示两个例子,然后说说对baidutemplate.js的理解,从而将这一工具加到个人百宝箱里. <script id ...

  6. js模板引擎用法

    JavaScript模板引擎Template.js使用详解 作者:A_山水子农 字体:[增加 减小] 类型:转载 时间:2016-12-15我要评论 这篇文章主要为大家详细介绍了JavaScript模 ...

  7. Django基础,Day10 - template 模板引擎与路径设置

    作为一个Web框架,Django需要一个方便的方式来生成动态的HTML.最常见的方法依赖于模板.模板包含所需的HTML输出的静态部分以及一些特殊的语法描述如何插入动态内容. Django框架后端默认支 ...

  8. 如何选择Javascript模板引擎(javascript template engine)?

    译者 jjfat 日期:2012-9-17  来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...

  9. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

随机推荐

  1. [tsA1491][2013中国国家集训队第二次作业]家族[并查集]

    m方枚举,并查集O(1)维护,傻逼题,,被自己吓死搞成神题了... #include <bits/stdc++.h> using namespace std; struct tri { i ...

  2. bcd(Binary-Coded Decimal‎缩写)

    Binary-Coded Decimal‎,简称BCD,称BCD码或二-十进制代码,亦称二进码十进数.是一种二进制的数字编码形式,用二进制编码的十进制代码.这种编码形式利用了四个位元来储存一个十进制的 ...

  3. 64位CentOS6.5下Eclipse用Java连接mysql

    1.到官网上下载jdbc驱动,我下载的是mysql-connector-java-5.0.8.tar.gz 2.解压下载到的文件 tar -zxvf mysql-connector-java-5.0. ...

  4. 无管理员帐号的WIN7,如果使用自己的JDK版本?

    因为公司的电脑只有普通权限, 而且JDK版本低了. 那我只好用BAT脚本来导入自己的环境啦,毕竟每次在CMD窗口输入太繁琐. set JAVA_HOME=D:\JDK8 set CLASSPATH=D ...

  5. 络谷 P1363 幻想迷宫

    P1363 幻想迷宫 题目描述 背景 Background (喵星人LHX和WD同心协力击退了汪星人的入侵,不幸的是,汪星人撤退之前给它们制造了一片幻象迷宫.) WD:呜呜,肿么办啊…… LHX:mo ...

  6. Bitnami LNMP集成包安装简单总结

    前言发送图文消息时间点,访问量大,请求并发多,业务web机处理不过来,新增加了2台web机应对.搞过Linux软件安装的都知道,各种库的依赖会把人搞崩溃,尤其是服务器不能访问外网的情况下,会非常的蛋疼 ...

  7. firedac的TFDStoredProc动态创建并调用存储过程

    1)中间件执行存储过程 sp.Close; sp.StoredProcName := procName; sp.Prepare;  // 生成存储过程的参数列表,无任何OUTPUT的存储过程,也会自动 ...

  8. HDU 4534

    AC自动机+状态DP. 虽然很明显的AC自动机+状态DP题,但要分析问题上还是欠缺一点了.一直在犹豫枚举每一个字符选或不选的状态会不会超时,以为会达到状态有2^n,但其实根本没有.因为有很多状态是可以 ...

  9. Thrift源代码分析(八)--总结加一个完整的可执行的Thrift样例

    前面七篇文章分析了Thrfit的方方面面,看到这里时应该对Thrift有了深入的理解. Thrift源代码分析(一)-- 基本概念 Thrift源代码分析(二)-- 协议和编解码 Thrift源代码分 ...

  10. PCB LDI文件 自动化输出(改造)实现思路

    由于工厂采用Liunxs系统输出LDI文件,由于我们数据库是用的Windows Server,编程语言是.net 无法与Liunxs系统进行有效对接, 所以造成才会造成LDI 资料输效率极低,人员工作 ...