template.js 数据渲染引擎

时间：2022-09-01 00:20:34

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、遍历数组显示数据：

template.js 数据渲染引擎
<!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>
template.js 数据渲染引擎

2、模拟子模板

template.js 数据渲染引擎
<!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>
template.js 数据渲染引擎

3、子模板里面的子模板

template.js 数据渲染引擎
<!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 数据渲染引擎

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

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

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

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

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

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

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

  4. jquery template&period;js前端模板引擎

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Powershell实例小结（服务管理）

    有关服务管理的具体实例脚本如下: #$lists="1.1.1.1","2.2.2.2" #远程ip列表 foreach ($list in $lists){ ...

  2. linux下的find文件查找命令与grep文件内容查找命令

    在使用linux时,经常需要进行文件查找.其中查找的命令主要有find和grep.两个命令是有区的. 区别:(1)find命令是根据文件的属性进行查找,如文件名,文件大小,所有者,所属组,是否为空,访 ...

  3. SQL2008中Merge Into的用法

    在SQL2008中,新增了一个关键字:Merge,这个和Oracle的Merge的用法差不多,只是新增了一个delete方法而已.下面就是具体的使用说明: 首先是对merge的使用说明: merge ...

  4. OpenCV2&period;4&period;6与vs2008配置问题

    刚刚学习Opencv,发现配置的时候蛮复杂的,特此记下以备后续. 我的opencv安装在D:\OpenCV\opencv 1.设置环境变量 首先说一下环境配置,看到很多网上说的是根据系统的位数来判断, ...

  5. vijosP1049 送给圣诞夜的礼品

    vijosP1049 送给圣诞夜的礼品 链接:https://vijos.org/p/1049 [思路] 快速幂+矩阵转换. 将m次矩阵的转换看作是一次快速幂中的乘法操作,这样可以用O(log(k/m ...

  6. 函数&colon;灵活即强大 - 零基础入门学习Python018

    函数:灵活即强大 让编程改变世界 Change the world by program 上节课我们基本介绍了Python函数的用法,非常简单.这节课我们主要针对函数的参数和返回值进一步深入学习.学习 ...

  7. fullcalendar日历控件集合知识

    1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方 ...

  8. Android 开发笔记&lowbar;&lowbar;&lowbar;Intent的使用

    public class ActRequestActivity extends AppCompatActivity implements OnClickListener { private EditT ...

  9. 怎么查看mysql的安装目录

    如果忘记了MySQL的安装目录,怎么快速找到呢?方法或许很多,作者觉得这种最方便了 环境:windows+mysql+navicat 方法:进入mysql命令行输入:show variables li ...

  10. JDK动态代理深入理解分析并手写简易JDK动态代理（下）

    原文同步发表至个人博客[夜月归途] 原文链接:http://www.guitu18.com/se/java/2019-01-05/27.html 作者:夜月归途 出处:http://www.guitu ...

相关文章