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. [HDU3038]How Many Answers Are Wrong(并查集)

    传送门 和某题类似,只不过奇偶换成了和. ——代码 #include <cstdio> #include <iostream> #define N 1000001 int n, ...

  2. DSP广告系统架构及关键技术解析(转)

    广告和网络游戏是互联网企业主要的盈利模式 广告是广告主通过媒体以尽可能低成本的方式与用户达成接触的商业行为.也就是说按照某种市场意图接触相应人群,影响其中潜在用户,使其选择广告主产品的几率增加,或对广 ...

  3. bootstrap-table与Spring项目集成实例收集

    bootstrap-table项目官网:https://github.com/wenzhixin/bootstrap-table bootstrap-table各版本下载:https://github ...

  4. F2BPM 开发Api与RESTfull应用服务Api 层次关系及示例

    目前越来越多的企业架构解决方案更加趋向于基于http协议“微服务”访问跨系统调用,而不使用统传的WebService调用,即通过RESTfull方式进行交互,更加轻量整合调用更加方便.本文档中所有F2 ...

  5. MySQL的各种网络IO超时的用法和实现

    2016-04-06 赵伟 数据库开发者 客户端C API 在C API中调用mysql_options()来设置mysql_init() 所创建的连接对象的属性,使用这三个选项可以设置连接超时和读写 ...

  6. 网络银行木马DYRE知多少(1)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXF1c2hp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  7. 关于Windows下程序运行的说明

    预计有非常多人首次都是通过Windows(微软的操作系统)来使用计算机的.Windows的设计导致非常多人觉得全部程序仅仅要双击一下就能够被正确运行了,所以一大堆初学程序设计的童鞋就会遇到些疑问: 为 ...

  8. UVa 263 - Number Chains

    题目:给你一个数字n0.将它的每一个位的数字按递增排序生成数a,按递减排序生成数b, 新的数字为n1 = a-b,下次依照相同方法计算n1,知道出现循环,问计算了多少次. 分析:数论.模拟.直接模拟计 ...

  9. 软件project文档中的数据库模型设计

    背景:软件project文档之<数据库设计说明书>的结构设计部分要明白规划出数据库的概念结构设计.逻辑结构设计.物理结构设计,就是设计数据库的概念模型.逻辑模型.物理模型.那么.何为数据库 ...

  10. HTML5开发移动web应用——SAP UI5篇(7)

    SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponen ...