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));