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. 测试教程网.unittest教程.6. 命令行接口

    From: http://www.testclass.net/pyunit/commind_line_interface/ 背景 unittest支持命令行接口,我们可以在命令行里指定运行具体的测试用 ...

  2. ALGO-22_蓝桥杯_算法训练_装箱问题(DP)

    问题描述 有一个箱子容量为V(正整数,<＝V<＝),同时有n个物品(<n<＝),每个物品有一个体积(正整数). 要求n个物品中,任取若干个装入箱内,使箱子的剩余空间为最小. 输 ...

  3. Unity3D工程版本管理方案【转自 兜里】

    参阅:http://outofmemory.cn/wr/?u=http%3A%2F%2Fblog.dou.li%2Funity3d%25e5%25b7%25a5%25e7%25a8%258b%25e7 ...

  4. Linux搭建Node.js环境

    1,安装Node.js curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash sudo yum -y in ...

  5. C#连接Access数据库显示未在本地计算机注册解决方法

    C#连接数据库时会出错 语句如下 string mystr = @"Provider=Microsoft.ACE.OLEDB.12.0; Data Source=C:\Users\hasee ...

  6. PAT 乙级 1046 划拳(15) C++版

    1046. 划拳(15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 划拳是古老中国酒文化的一个有趣的组成部分 ...

  7. Java NIO系列教程（二） Channel通道介绍及FileChannel详解

    目录: <Java NIO系列教程(二) Channel> <Java NIO系列教程(三) Channel之Socket通道> Channel是一个通道,可以通过它读取和写入 ...

  8. Scrapy学习篇（一）之框架

    概览 在具体的学习scrapy之前,我们先对scrapy的架构做一个简单的了解,之后所有的内容都是基于此架构实现的,在初学阶段只需要简单的了解即可,之后的学习中,你会对此架构有更深的理解.下面是scr ...

  9. ros6.44版本增加了测试出两台ROS之间的速度极限是多少

    原文: https://wiki.mikrotik.com/wiki/Manual:Tools/Speed_Test [admin@MikroTik]] > /tool speed-test a ...

  10. [UE4]传值与传引用

    值传递是圆形图标 设置引用需要使用Set by ref函数 对象在蓝图中都是以引用传递 对象,不需要额外设置参数类型是传值还是传引用. 结构体在蓝图中默认是按值传递 也可以手动设置结构体参数为按引用类 ...