doT使用心得

来源：互联网发布：淘宝店铺怎样装修视频编辑：程序博客网时间：2024/05/17 04:48

doT是一个小巧快速无依赖的JS模板框架:

无依赖, 120 行代码
极其快速
自定义定界符 (custom delimiters)
运行时求值 (runtime evaluation)
运行时插值 (runtime interpolation)
编译时求值 (compile-time evaluation)
支持局部模板
支持条件语句
Github源码地址

DoT定界符列表:

{{ }} 用于求值(evaluation)
{{= }} 用于插值(interpolation)
{{! }} 用于编码求值
{{# }} 用于编译时求值/引入和局部模板
{{## #}} 用于编译时定义
{{? }} 条件语句
{{~ }} 数组迭代

Demo:

首先需要引入 javascript 文件：

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

插值/求值模板

模板数据必须使用 it 作为引用

    <script id="pagetmpl" type="text/template">        <h2>Here is the page using a header template</h2>        //{{=}}插入值        {{=it.name}}        //{{#}}编译时求值        {{#def.header}}    </script>

    <script type="text/javascript">        //模拟数据         var data = {            title: "My title",            name: "My name"        };        // template()是dot用来编译模板的方法        var pagefn = doT.template(document.getElementById('script模板ID').html(), data);        // content是自定义模板ID        document.getElementById('content').innerHTML = pagefn;     </script>

    <body>        <div id="content"></div>     </body>

数组迭代模板

    <script type="text/template" id='girlList'>        {{~it:value}}        <li class="item" onclick="console.log('我是:{{=value.nick}}')">            ![]({{=value.img_url}})            <p class="name">{{=value.nick}}</p>            <p class="info">{{=value.age}}岁    {{=value.username}}</p>        </li>        {{~}}    </script>

    // ret是服务器返回JSON数据    // template()是dot用来编译模板的方法 girlList是自定义模板ID    var resultText = doT.template(girlList.innerHTML)(ret);     // 追加数据    $('ul').append($api.dom('#dataList'), resultText);     // 覆盖数据    $('ul').html(resultText);

条件模板

{{？x==y}}<div>如果x==y执行这里</div>{{??}}<div>如果x==y不成立 执行这里</div>{{？}}

发现一个小东西,使用拼接字符串方式的时候:

    var resultStr = "";    for(var i = 0;i < ret.length; i++){        resultStr += '<li class="item" onclick="console.log(ret[i])">';        resultStr += '![]('+ ret[i].img_url+')'        resultStr += '<p class="name">'+ ret[i].nick+'</p>'        resultStr += '<p class="info">'+ ret[i].age+'岁    '+ ret[i].username+'</p>'        resultStr += '</li>'    }

这里的console.log(ret[i])没法执行,因为浏览器编译时onclick方法并不在这个for循环下,ret是undefined,而使用doT模板没有这个问题,可以比较方便的操作数据,

仅供参考,欢迎指正

阅读全文

1 0