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

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

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

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

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

template.js可以使用命令安装，也可以在git上面下载：https://github.com/yanhaijing/template.js

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>

4.foreach循环获取数据

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

          <%items.forEach(function(item){%>

          <li><%=item.name%>  <%=item.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>

5、registerFunction

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

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

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

      <h5><%=selfFun()%></h5>

      <h5><%=selfFun2()%></h5>

  </script>

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

  <script>

    template.registerFunction('selfFun', function () {

        return '自创函数1'

    });

    template.registerFunction('selfFun2', function () {

        return '自创函数2'

    });

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

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

</script>

</body>

</html> 

6、registerModifier

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

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

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

    <h5><%:up='newbie is ace'%></h5>

  </script>

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

  <script>

   template.registerModifier('up', function (str) {

    return str.toUpperCase();

});

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

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

</script>

</body>

</html>

template.js的使用心得的更多相关文章

  1. jQuery.template.js 简单使用

    之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...

  2. template.js遍历对象的写法

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟 ...

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

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

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

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

  5. 出位的template.js 基于jquery的模板渲染插件

    找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...

  6. javascript模板引擎template.js使用

    到GitHub上下载template.js库.引入到页面 以type="text/html" 这样指定javascript类型的是一种javascript模板渲染方法,在实际项目中 ...

  7. artTemplate/template.js模板将时间戳格式化为正常的日期

    1:引用<script type="text/javascript" src="../js/artTemplate/template.js">< ...

  8. template.js简单入门

    template.js是一款开源的JavaScript模板引擎,用来渲染页面的. github地址 https://github.com/yanhaijing/template.js 下载templa ...

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

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

随机推荐

  1. Python3 小工具-TCP半连接扫描

    from scapy.all import * import optparse import threading def scan(ip,port): pkt=IP(dst=ip)/TCP(dport ...

  2. Python3 小工具-ICMP扫描

    from scapy.all import * import optparse import threading import os def scan(ipt): pkt=IP(dst=ipt)/IC ...

  3. POJ 3308 Paratroopers（最大流最小割の最小点权覆盖）

    Description It is year 2500 A.D. and there is a terrible war between the forces of the Earth and the ...

  4. 环境变量PATH

    一.举例 我在用户主文件夹执行命令“ls”,会在屏幕显示该文件夹下的所有文件.然而,ls的完整文件名为“/bin/ls”,按道理我不在/bin下要想执行ls命令必须输入“/bin/ls”,但我仅仅需要 ...

  5. Oil Deposits（DFS连通图）

    Description The GeoSurvComp geologic survey company is responsible for detecting underground oil dep ...

  6. Internet Technologe

    Store and Forward Networking Efficient Message Transmission:Packet Switching(分组交换) Challenge: in a s ...

  7. Web后台任务处理

    文章:.NET Core开源组件:后台任务利器之Hangfire Hangfire官网介绍:在.NET和.NET Core应用程序中执行后台处理的简便方法.无需Windows服务或单独的过程. 以持久 ...

  8. java — JVM调优

    数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型.基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值.“引用值”代表了某个对象的引用,而不是对象本身, ...

  9. Spring Boot（四）@EnableXXX注解分析

    在学习使用springboot过程中,我们经常碰到以@Enable开头的注解,其实早在Spring3中就已经出现了类似注解,比如@EnableTransactionManagement.@ Enabl ...

  10. activemq控制面板里的NumberOfPendingMessages、MessagesEnqueued、MessagesDequeued含义

    Number Of Consumers 消费者 这个是消费者端的消费者数量.Number Of Pending Messages 等待消费的消息 这个是当前未出队列的数量.可以理解为总接收数-总出队列 ...