doT学习（三）之实战

案例一：

<html>
    <head>

    <script id="headertmpl" type="text/x-dot-template">
        <h1>{{=it.title}}</h1>
    </script>

    <script id="pagetmpl" type="text/x-dot-template">
        <h2>Here is the page using a header template</h2>
        {{#def.header}}
        {{=it.name}}
    </script>

    <script id="customizableheadertmpl" type="text/x-dot-template">
         {{#def.header}}
         {{#def.mycustominjectionintoheader || ''}}
     </script>

    <script id="pagetmplwithcustomizableheader" type="text/x-dot-template">
        <h2>Here is the page with customized header template</h2>
        {{##def.mycustominjectionintoheader:
            <div>{{=it.title}} is not {{=it.name}}</div>
        #}}
        {{#def.customheader}}
        {{=it.name}}
    </script>

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

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

    <script type="text/javascript">
        var def = {
            header: document.getElementById('headertmpl').text,
            customheader: document.getElementById('customizableheadertmpl').text
        };
        var data = {
            title: "My title",
            name: "My name"
        };

        var pagefn = doT.template(document.getElementById('pagetmpl').text, undefined, def);
        document.getElementById('content').innerHTML = pagefn(data);

        pagefn = doT.template(document.getElementById('pagetmplwithcustomizableheader').text, undefined, def);
        document.getElementById('contentcustom').innerHTML = pagefn(data);

    </script>

</html>

 案例二：

// 实际应该展示在页面上的Dom
<div id="interpolation"></div>

// 模版
<script id="interpolationtmpl" type="text/x-dot-template">
    <!-- 新增用户弹窗 -->
    <div id="addSourcePopup" class="modal fade q-popup" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true" data-child-node-id="q-popup" style="margin-top: 10px;">
        <div class="q-popup-modal modal-dialog" style="width: 900px;background-color: #ffffff;">
            <div class="popup-header modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                {{? it.data && it.data.id}}
                更新计划
                {{??}}
                新增计划
                {{?}}
            </div>
        </div>
    </div>
</script>

// 编译和渲染
jQuery.ajax({
     type: "get",
     url: "http://",
     dataType: "json",
     success: function (result) {
     if (result && "0" == result.code && result.json) {
          var template = doT.template($("#interpolationtmpl").text()); // 将模版编译成函数
          var rs = template(result.json); // 使用数据渲染
　　　     $("#interpolation").html(rs); // 添加进之前准备好的Dom
        }
     }
 });

 

posted @ 2019-07-22 18:39  坤嬷嬷  阅读(226)  评论(0)    收藏  举报