template.js小小说明

教程

template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。

简介

主要的用途就是，在写好的模板上，放进数据，生成含有数据的html代码。一个超快的前端模板引擎。使用一个type="text/html"的script标签存放模板

            <script id="test" type="text/html">
            <h1>{{title}}</h1>
            <ul>
                {{each list as value i}}
                    <li>索引 {{i + 1}} ：{{value}}</li>
                {{/each}}
            </ul>
            </script>

           var data = {
                title: '标签',
                list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
            };
           var html = template('test', data);
           document.getElementById('content').innerHTML = html;
            

模板语法

有两个版本的模板语法可以选择。简洁语法 和 原生语法

        {{if admin}}
            {{include 'admin_content'}}
            {{each list}}
                <div>{{$index}}. {{$value.user}}</div>
            {{/each}}
        {{/if}}

        <%if (admin){%>
            <%include('admin_content')%>
            <%for (var i=0;i<list.length;i++) {%>
                <div><%=i%>. <%=list[i].user%></div>
            <%}%>
        <%}%>
            

方法

template(id, data)
根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。如果没有 data 参数，那么将返回一渲染函数。

template.compile(source, options)
将返回一个渲染函数

             var source = '<ul>'
              '{{each list as value i}}'
                  '<li>索引 {{i + 1}} ：{{value}}</li>'
              '{{/each}}'
              '</ul>';

            var render = template.compile(source);
            var html = render({
                list: ['摄影', '电影', '民谣', '旅行', '吉他']
            });
            
            document.getElementById('content').innerHTML = html;
            

template.render(source, options)
将返回渲染结果。

template.helper(name, callback)
添加辅助方法。

template.config(name, value)
更改引擎的默认配置。

        字段          类型              默认值           说明
       openTag          String 	    '{{' 	    逻辑语法开始标签
       closeTag         String 	    "}}" 	    逻辑语法结束标签
       escape           Boolean      true 	    是否编码输出 HTML 字符
       cache            Boolean      true 	    是否开启缓存（依赖 options 的 filename 字段）
       compress       Boolean 	  false     是否压缩 HTML 多余空白字符
            

使用预编译

include可嵌套子模板。

           //将id为list的模板包含进来         
              {{include 'list'}}         
            

转义

           //只需要加上“＃”号，模板默认就不转义啦。
           <div id="content"></div>
            <script id="test" type="text/html">
            	<p>不转义：{{#value}}</p>
            	<p>默认转义： {{value}}</p>
            </script>

           var data = {
             value: '<span style="color:#F00">hello world!</span>'
              };
            var html = template('test', data);
            document.getElementById('content').innerHTML = html;
            

在页面上打印你的数据。

           <script id="test" type="text/html">
            {{print a b c}}
            </script>


            var html = '';
            var data = {
            	a: 'hello',
            	b: '--world',
            	c: '--!!!'
            };
            html = template('test', data);
            document.write(html);
            

另一个更快的 doT.js模板引擎

模板是 ：text/x-dot-template类型脚本

使用方法：

插值 {{=}}

        <div id="interpolation"</div>


        <script id="interpolationtmpl" type="text/x-dot-template">
           <div>Hi {{=it.name}}! </div>
           <div>{{=it.age || ''}}</div>
        </script>


        <script type="text/javascript">                          
           var dataInter = { "name": "Jake", "age": 31 };
           var interText = doT.template($("#interpolationtmpl").text());
           $("#interpolation").html(interText(dataInter));
        </script>
            

for evaluation for in 循环 {{}} 赋值

           <div id="evaluation"></div>

           <script id="evaluationtmpl" type="text/x-dot-template">
              {{ for(var prop in it) { }}
                 <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
              {{ } }}
           </script>
            

for array iteration 数组 {{~ }}数组遍历

           <div id="arrays"></div>


        <script id="arraystmpl" type="text/x-dot-template">                        
          {{~it.array:value:index}}
             <div>{{= index+1 }}{{= value }}!</div>
          {{~}}
        </script>

        <script type="text/javascript">       
           var dataArr = {"array":["banana","apple","orange"]};
           var arrText = doT.template($("#arraystmpl").text());
           $("#arrays").html(arrText(dataArr));
         </script>
            

for conditionals 条件 {{? }}

           // {{? }} if
           // {{?? }} else if
           // {{??}} else
        <div id="condition"></div>

        <script id="conditiontmpl" type="text/x-dot-template">                        
            {{? !it.name }}
            <div>Oh, I love your name, {{=it.name}}!</div>
            {{?? !it.age === 0}}
            <div>Guess nobody named you yet!</div>
            {{??}}
            You are {{=it.age}} and still dont have a name?
            {{?}}
        </script>

            

编码 {{!it.uri}}

        <script id="interpolationtmpl" type="text/x-dot-template">                        
           Visit {{!it.uri}} {{!it.html}}
        </script>
           

{{#}} 自定义编译

        <div id="part"></div>


       <script id="parttmpl" type="text/x-dot-template">                        
       {{##def.snippet:
         <div>{{=it.name}}</div>{{#def.joke}}
       #}}
       {{#def.snippet}}
       {{=it.html}}
        </script>

        var dataPart = {"name":"Jake","age":31,"html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
        var defPart = {"joke":"<div>{{=it.name}} who?</div>"};
        var partText = doT.template($("#parttmpl").text(), undefined, defPart);
        $("#part").html(partText(dataPart));