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. Caffe 工程的一些编译错误以及解决方案

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51371936 整理一下最近遇到caff ...

  2. Tomcat 7源码学习笔记 -9 tomcat重启后session仍然保留

    使用Tomcat 7缺省的配置,tomcat关闭后重新启动,发现原来的session没有被删掉,用原来的request获取session仍然可以取到.但是并没有配置session持久化. 原因如下: ...

  3. Openfire:通过Servlet群发消息

    在Openfire中自带有Broadcase插件,可以让我们群发消息给全部用户或者组.不过如果是我们通过Servlet来实现这一功能,那么是能够增加一定的灵活性的.具体做法直接看Demo代码: pub ...

  4. PHP array_diff_assoc()

    定义和用法 array_diff_assoc() 函数返回两个数组的差集数组.返回的数组的元素都取自被比较的数组(既第一个数组). 和 array_diff() 函数 不同,本函数要求键名和键值都进行 ...

  5. 【转】Maven的安装与使用(ubuntu)

    原文: http://www.cnblogs.com/yunwuzhan/p/5900311.html https://maven.apache.org/guides/getting-started/ ...

  6. js 推断字符串是否包括某字符串

    var Cts = "bblText"; if(Cts.indexOf("Text") > 0 ) { alert('Cts中包括Text字符串'); } ...

  7. NDK编译库执行时报dlopen failed: cannot locate symbol &quot;__exidx_end&quot; 解决的方法

    当用NDK编译的库在执行载入时报例如以下错: dlopen("/data/data/xxx.xxx.xxx/lib/libxxx.so") failed: dlopen faile ...

  8. 查找存在某字符的文件列表,不包括svn文件

    find . ! -wholename '*.svn*' -print | xargs grep "img" | awk -F ':.' '{print $1}' | uniq

  9. luogu3225 [HNOI2012]矿场搭建

    题目大意 给出一个有$n(n\leq 500)$个节点的无向图,一个满足条件的点集$V$会使得对于图中的每一个节点$u$,满足路径起点为$u$终点$v\in V$的路径集合$P_u$中总存在至少两条路 ...

  10. IP Address

    http://poj.org/problem?id=2105 #include<stdio.h> #include<string.h> int main() { ]; ] = ...