dot初探

阅读数：1523 发布时间：2016-07-29 20:08:26

作者：zzl005 标签： 朱忠来005 dot.js

通过实例初探 dot.js

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>dottest</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.0.3/doT.min.js">
    </script>
</head>
<body>
    <!--HTML部分-->
    <script id="j-tmpl" type="text/template">
        {{ if(it.success){ }}
            <h2>results:</h2>
            <ul>
                {{ for (var i = 0, l = it.data.length; i < l; i++) { }}
                    <li>
                        <h5>{{=it.data[i].title}}</h5>
                        <p>{{!it.data[i].message}}</p>
                    </li>
                {{ } }}
            <ul>
        {{ }else{ }}
            <h2>暂无数据</h2>
        {{ } }}
    </script>

    <!--javascript部分-->
    <script>
        var obj = {
            success: true,
            data:[
                    {title:'数据1',message:"数据1的内容"},
                    {title:'数据2',message:"数据2的内容"}
            ]
        }
        var tmpl = document.getElementById('j-tmpl').innerHTML;
        var doTtmpl = doT.template(tmpl);
        console.log(doTtmpl(obj ));
        document.write(doTtmpl(obj ));
    </script>
</body>
</html>

可以看到 HTML 部分，主要是一个输出内容的模板，定义了一个 ifesle 的判断条件，还定义了一个循环，用来遍历一个无序列表。
js 部分，就是供应数据了，定义了一个对象，里面有两个内容，一个是 success ，值为真，另一个就是 data 数组。
然后就可以通过 doT.template(xx)，将数据填入到模板里。
最后，页面显示出来了，控制台也打出了相应的内容。

页面显示
控制台输出

7.30更新：
数组实例：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>dotarray</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.0.3/doT.min.js">
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
    <!--HTML模板部分-->
    <script id="fruitstmpl" type="text/template">
        {{~it:value:index}}
            <div>{{= index+1 }}、{{= value }}!</div>
        {{~}}
    </script>

    <!-- 插入位置 -->
    <div id="fruits"></div>

    <!--javascript部分-->
    <script>
        fruit = ["banana","apple","orange"];
        var arrText = doT.template($("#fruitstmpl").text());
        $("#fruits").html(arrText(fruit));
    </script>
</body>
</html>

dot 数组输出实例

感受

我的感觉是，如果这个页面是 php 写的，那么那个循环肯定是在读取数据库，然后显示了。然而单纯由 HTML 和 js 写的页面，利用 dot 可以将数据和页面显示分离开，可以先将页面的框架写出来，后面可以直接按照格式供应数据，就可以实现快速开发。