template.js 数据渲染引擎

template.js是一款JavaScript模板引擎，用来渲染页面的。

原理：提前将Html代码放进编写模板

<script id="tpl" type="text/html"></script>

中，当需要渲染页面时，在js里这样调用：

var tpl = document.getElementById('tpl').innerHTML; template(tpl, data});

template.js开始标签默认为<%，结束标签默认为%>，显示数据为<%= i %>。

下面是使用template.js v0.7.1版本的实验结果：

1、遍历数组显示数据：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="wp"></div>

    <script id="tpl" type="text/html">

      <ul>

       <%for(var i in items){%>

       <li>

        name:<%=items[i].name%>    val:<%=items[i].val%>

    </li>

    <%}%>

</ul>

</script>

<script src="../template.js"></script>

<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>

</body>

</html>

2、模拟子模板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模拟子模版</title>

</head>

<body>

    <div id="wp"></div>

    <script id="tpl" type="text/html">

       <h1>国内新闻</h1>

       <%:=newsListTpl({list: list1, tpl: childTpl})%>

       <h1>国际新闻</h1>

       <%:=newsListTpl({list: list2, tpl: childTpl})%>

   </script>

   <script id="child-tpl" type="text/html">

    <ul>

        <% for(i in list){ %>

        <li><%=list[i].title%>   <%=list[i].desc%></li>

        <% } %>

    </ul>

</script>

<script src="../template.js"></script>

<script>

    var childTpl = template(document.getElementById('child-tpl').innerHTML);

    var data={

        newsListTpl: childTpl,

        list1: [

        {title: '国内标题1', desc: '国内描述1'},

        {title: '国内标题2', desc: '国内描述2'},

        {title: '国内标题3', desc: '国内描述3'},

        ],

        list2: [

        {title: '国际标题1', desc: '国际描述1'},

        {title: '国际标题2', desc: '国际描述2'},

        {title: '国际标题3', desc: '国际描述3'},

        ],

    }

    console.log(data);

    var html = template(document.getElementById('tpl').innerHTML,data);

    document.getElementById('wp').innerHTML = html;

</script>

</body>

</html>

3、子模板里面的子模板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模拟子模版</title>

</head>

<body>

    <div id="wp"></div>

    <script id="tpl" type="text/html">

     <h1>国内新闻</h1>

     <%:=listTpl({list: list1, tpl: subChildTpl})%>

     <h1>国际新闻</h1>

     <%:=listTpl({list: list2, tpl: subChildTpl})%>

 </script>

 <script id="child-tpl" type="text/html">

    <ul>

        <% for(i in list){ %>

            <%:=tpl(list[i])%>

        <% } %>

    </ul>

</script>

<script id="sub-child-tpl" type="text/html">

    <li>

        <%=title%>  <%=desc%>

    </li>

</script>

<script src="../template.js"></script>

<script>

    var childTpl = template(document.getElementById('child-tpl').innerHTML);

    var subChildTpl = template(document.getElementById('sub-child-tpl').innerHTML);

    var data={

        listTpl: childTpl,

       newsChildTpl:subChildTpl,

        list1: [

        {title: '国内标题1', desc: '国内描述1'},

        {title: '国内标题2', desc: '国内描述2'},

        {title: '国内标题3', desc: '国内描述3'},

        ],

        list2: [

        {title: '国际标题1', desc: '国际描述1'},

        {title: '国际标题2', desc: '国际描述2'},

        {title: '国际标题3', desc: '国际描述3'},

        ],

    }

    console.log(data);

    var html = template(document.getElementById('tpl').innerHTML,data);

    document.getElementById('wp').innerHTML = html;

</script>

</body>

</html>

template.js 数据渲染引擎的更多相关文章

  1. jquery jtemplates.js模板渲染引擎的详细用法第三篇

    jquery jtemplates.js模板渲染引擎的详细用法第三篇 <span style="font-family:Microsoft YaHei;font-size:14px;& ...

  2. jquery jtemplates.js模板渲染引擎的详细用法第二篇

    jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个t ...

  3. jquery jtemplates.js模板渲染引擎的详细用法第一篇

    jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了 ...

  4. jquery template.js前端模板引擎

    作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...

  5. 微信小程序与Vue js数据渲染对比

    //小程序 Page({ data: { items: [] }, onLoad: function(options) { this.setData({ items: [1,2,3] }) } }) ...

  6. 我是这样使用template.js来异步渲染数据的

    总监的代码用的是define+module.exports,为了效率先没去了解那一块,在github上找了一款功能单一的template.js来使用 https://github.com/yanhai ...

  7. 前端-使用template-web.js【模版引擎】渲染数据

    通过ajax请求到的数据,使用传统的拼接字符串也可以做到,但是‘ “ ” ‘这种模式,单引号.双引号容易 扩错,新手入门推荐使用这种,初入前端,需要一个一个敲代码体会一下. 使用 template.j ...

  8. 我是这样使用template.js来异步渲染数据的demo

    直接来代码吧! <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

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

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

随机推荐

  1. ckeditor_4.5.10_full，ckfinder_aspnet_2.6.2，插件使用

    1.ckfinder文件上传的权限: public override bool CheckAuthentication() { // WARNING : DO NOT simply return &q ...

  2. bzoj5006: [THUWC2017 Bipartite]随机二分图

    某人在玩一个非常神奇的游戏.这个游戏中有一个左右各 nnn 个点的二分图,图中的边会按照一定的规律随机出现. 为了描述这些规律,某人将这些边分到若干个组中.每条边或者不属于任何组 (这样的边一定不会出 ...

  3. [Html] jQuery Grid

    https://www.jqwidgets.com/  jQuery Grid https://marketplace.visualstudio.com/items?itemName=jqwidget ...

  4. HTML和SEO基础知识：H标签全透视

    原文地址:http://www.chinaz.com/web/2010/0921/134391.shtml 什么是H标签? h1,h2,h3,h4,h5,h6,作为标题标签,并且依据重要性递减.我认为 ...

  5. STP RSTP

    一.透明网桥 1.对于一般的透明网桥来说,通常都具有以下的特点: +拓展LAN的能力 +自主动态学习站点的地址信息 当网桥的某个端口上收到含有某个源MAC地址的数据帧时,它就把该MAC地址和接收该数据 ...

  6. [UE4]Slot

    一.Slot是容器中子控件的一个属性,因此每个子控件的Slot属性值都可以不一样. 二.不同容器提供的Slot属性都不一样 三.Canvas Panel提供的Slot Anchors预设16种常见的样 ...

  7. [UE4]使用Is Locally Controlled解决第一人称和第三人称武器位置问题

    一.在第一人称网络游戏中,自己看到的是第一人称,其他玩家看到的自己是第三人称. 二.由于第一人称和第三人称是不同的模型,所以枪在模型上面的插槽位置也会不一样. 三.在武器挂载在人物模型的使用,使用“I ...

  8. MySQL 之 mysqlbinlog解析binlog乱码问题解密

    发现mysql库的binlog日志出来都是乱码,如下所示: BINLOG ’ IXZqVhNIAAAALQAAAGcBAAAAAHoAAAAAAAEABHRlc3QAAno0AAEDAABUOcnY ...

  9. 在线学习和在线凸优化（online learning and online convex optimization）—在线凸优化框架3

    近年来,许多有效的在线学习算法的设计受到凸优化工具的影响. 此外,据观察,大多数先前提出的有效算法可以基于以下优雅模型联合分析: 凸集的定义: 一个向量 的Regret定义为: 如前所述,算法相对于竞 ...

  10. QueryString to Dictionary<string, string>

    public class ModelConvertHelper<T> where T : new() {// 此处一定要加上new() public static IList<T&g ...