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. 机器学习-线性回归LinearRegression

    概述 今天要说一下机器学习中大多数书籍第一个讲的(有的可能是KNN)模型-线性回归.说起线性回归,首先要介绍一下机器学习中的两个常见的问题:回归任务和分类任务.那什么是回归任务和分类任务呢?简单的来说 ...

  2. Python3 Tkinter-Listbox

    1.创建 from tkinter import * root=Tk() lb=Listbox(root) for item in ['python','tkinter','widget']: lb. ...

  3. SGU 176 Flow construction（有源汇上下界最小流）

    Description 176. Flow construction time limit per test: 1 sec. memory limit per test: 4096 KB input: ...

  4. wpa_supplicant之eloop_run分析

    部分内容转自http://blog.chinaunix.net/uid-20273473-id-3128151.html 重要结构体!!! struct eloop_sock { int sock; ...

  5. 阅读 用P4对数据平面进行编程

    引言 关于题目,对数据平面进行编程,在之前读过the road to SDN,软件定义网络的思想在于数控分离,其对网络行为的编程暂时只局限于网络控制平面.其转发平面在很大程度上受制于功能固定的包处理硬 ...

  6. android 出现Make sure the Cursor is initialized correctly before accessing data from it

    Make sure the Cursor is initialized correctly before accessing data from it 详细错误是:java.lang.IllegalS ...

  7. （beta冲刺5/7）

    团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 推进后端完成安卓端接口的开发 在测试中发现返回地图接口存在错误(待修复) 推进 ...

  8. servlet转发和重定向

    1 转发 RequestDispatcher getRequestDispatcher(java.lang.String path) 1)地址栏不会改变 2)转发只能转发到当前web应用内的资源 3) ...

  9. Razor语法和Razor引擎大全

    一.Razor语法 1.Razor的标识符 解释:@字符被定义为Razor服务器代码块的标识符,后面的表示是服务器代码了.web form中使用<%%>中写服务器代码一个道理.在vs工具里 ...

  10. scala中的模式匹配

    基本语法 变量 match { case 值1 => 代码 case 值2 => 代码 ... case 值N if (...) => 代码 case _ => 代码 } 常量 ...