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可以使用命令安装，也可以在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>

posted on 2017-11-30 15:56 Newbie_小白阅读(58575) 评论(1) 编辑收藏举报