dot.js教程文档api

dot.js是一个短小精悍的js模板引擎，压缩版仅有4K大小，最近使用dot的时候整理出这个dot.js教程文档，其实称不上什么教程，只是对dot.js的介绍和实例，希望能帮助到一部分需要的人。

使用方法：

{{= }} for 赋值

{{ }} for evaluation

{{~ }} for for循环数组

{{? }} for if判断

{{! }} for html标签是否转义

{{# }} for compile-time evaluation/includes and partials

{{## #}} for compile-time defines

dot.js调用方式：

var tmpText = doT.template(模板);

tmpText(数据源);

dot.js读取单个js对象

数据：{name:"张三",age:"24",sex:"男"}

        <script id="tpl1" type="text/dot-tpl">
            <table>
                <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
                <tr><td>{{= it.name}}</td><td>{{= it.age}}</td><td>{{= it.sex||"暂无"}}</td></tr>
            </table>
        </script>

jquery特效整理

dot.js遍历js数组（for循环）

数据：[["张三","24","男"],["李四","30","女"]]，当然这里改成外面是数组里面是对象也可以，如：[{name:"张三"},{name:"李四"},...]当然这个时候模板中就要用如：{{= it[index].name}}取值了

        <script id="tpl2" type="text/dot-tpl">
            <ol>
                {{~ it:value:index}}
                <li>{{= index+1}}:{{= it[index][0]}}</li><li>{{= it[index][1]}}</li><li>{{= it[index][2]||"暂无"}}</li>
                {{~}}
            </ol>
        </script>
        <script>
            var data2 = [["张三","24","男"],["李四","30","女"]];
            var tpl2= doT.template( $id("tpl2").innerHTML );
            console.log("读取数组数据："+tpl2(data2) );
        </script>

dot.js遍历js对象，（for in）

数据：{"001":{name:"张三",age:"24",sex:"男"},"002":{name:"李四",age:"26",sex:"男"}}

        <script id="tpl3" type="text/dot-tpl">
            <table>
                <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
                {{ for(var key in it) { }}
                <tr><td>{{= key}}:{{= it[key].name }}</td><td>{{= it[key].age }}</td><td>{{= it[key].sex }}</td></tr>
                {{ } }}
            </table>
        </script>
        <script>
            var data3 = {"001":{name:"张三",age:"24",sex:"男"},"002":{name:"李四",age:"26",sex:"男"}};
            var tpl3= doT.template( $id("tpl3").innerHTML );
            console.log("遍历js对象："+tpl3(data3) );
        </script>

本文链接：dot.js教程文档apihttp://www.51xuediannao.com/js/texiao/dot.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

    <script type="text/javascript" src="doT.js"></script>

</head>

<body>

<div class="body1"></div>

<div class="body2"></div>

<div class="body3"></div>

    <!--直接读取单个对象数据 -->

        <script id="tpl1" type="text/dot-tpl">

            <table>

                <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>

                <tr><td>{{= it.name}}</td><td>{{= it.age}}</td><td>{{= it.sex||"暂无"}}</td></tr>

            </table>

        </script>

        <script>

            var data1 = {name:"张三",age:"",sex:"男"};

            var tpl1= doT.template( $("#tpl1").html() );

            console.log("读取单个对象数据："+tpl1(data1) );

            $('.body1').prepend(tpl1(data1));

        </script>

    <!--读取数组数据 （for循环）-->

        <script id="tpl2" type="text/dot-tpl">

            <ol>

                {{~ it:value:index}}

                <li>{{= index+}}:{{= it[index][]}}</li><li>{{= it[index][]}}</li><li>{{= it[index][]||"暂无"}}</li>

                {{~}}

            </ol>

        </script>

        <script>

            var data2 = [["张三","","男"],["李四","","女"]];

            var tpl2= doT.template( $("#tpl2").html() );

            console.log("读取数组数据："+tpl2(data2) );

            $('.body2').prepend(tpl2(data2));

        </script>

    <!--读取遍历js对象（for in） -->

        <script id="tpl3" type="text/dot-tpl">

            <table>

                <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>

                {{ for(var key in it) { }}

                <tr><td>{{= key}}:{{= it[key].name }}</td><td>{{= it[key].age }}</td><td>{{= it[key].sex }}</td></tr>

                {{  } }}

            </table>

        </script>

        <script>

            var data3 = {"":{name:"张三",age:"",sex:"男"},"":{name:"李四",age:"",sex:"男"}};

            var tpl3= doT.template( $("#tpl3").html() );

            console.log("遍历js对象："+tpl3(data3) );

            $('.body3').prepend(tpl3(data3));

        </script>

</body>

</html>