doT的高級用法及loadData的使用

時間 2019-11-08

標籤 dot 高級用法 loaddata 使用简体版

原文原文鏈接

本文出自APICloud官方論壇，感謝論壇版主 gp3098的分享。javascript

以前直接把模板寫在頁面底部的script標籤內的，可是如今不一樣。使用了doT.js配合api的loadData方法，整個頁面就是模板。之前打開frame或者window的時候一直不明白url和data怎麼配合，一直覺得data只能加載到一些靜態的頁面，沒有其餘用法。css

學習了doT.js的一些高級用法，可以更好的搭建多頁面程序。在打開新頁面的時候先經過dot渲染一個頁面而後經過frame或者win的方法來加載html代碼。html

//數據渲染到frame的內容區域//默認只渲染第一頁
        function renderData(currid, tag, page, size, sort, order) {

                var currentSort = $api.dom('.screen a.on');

                var param = {
                        id: currid || tag.dataset.id,
                        page: 1,
                        size: 10,
                        sort: sort || currentSort.dataset.sort,
                        order: order || currentSort.dataset.order,
                }
                //從文件讀取兩個模板
                var template = loadfile('widget://mall/components/goodsList_frame.html');
                var template2 = loadfile('widget://mall/components/goodsitem.html');
                // var template = loadfile('widget://mall/components/goods.html');
                var def = {
                        debug: true,
                        content: template2, //第二個模板用於重複使用   在加載更多內容時候使用
                        urlparam: param,
                };
                var tempFn = doT.template(template, undefined, def); //生成渲染模板的函數
                api.cancelAjax({
                        tag: ajaxtag1
                });
                // console.warn(parseUrl(param));//用來解析url，把json的url變成字符串形式
                ajaxtag1 = $api.get(DOMAIN + '/ajax/goodslist?' + parseUrl(param), function(ret, err) {
                        console.warn(JSON.stringify(ret));
                        var html = tempFn(ret);
                        // 要檢查frame的真實內容在html這裏！！！
                        // console.warn(html);
                        //經過loadData方式把頁面加載到frame中，經過參數改變，每次從新加載frame內容
                        api.loadData({
                                frameName: 'goods_list',
                                url: 'widget://mall/components/', //要加載的頁面，data內的css、js的路徑的根路徑！！！
                                data: html //dot渲染出來的html頁面  成爲frame的內容，生成的frame頁面整個頁面均可以用dot模板語法由於整個頁面就是模板
                        });
                }, 'json');
        }
複製代碼
複製代碼

這裏的loadfile是官方的api方法有同步和異步兩種，都進行封裝過，但感受封裝得不夠好，只展示一個同步，否則代碼不完整。java

function loadfile(url) {
    return api.readFile({
        sync: true,
        path: url || '',
    });
}
複製代碼
複製代碼

還有官方的$api.get方法是不會返回tag用來取消ajax請求的ajax

//json轉url參數
var parseUrl = function(urlparam) {
    return Object.keys(urlparam).map(function(key) {
        return encodeURIComponent(key) + "=" + encodeURIComponent(urlparam[key]);
    }).join("&");

}
複製代碼
複製代碼

模板 1json

var template = loadfile('widget://mall/components/goodsList_frame.html');//對應的模板文件在下面
複製代碼
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="../css/all.css">
        <title>商品二級分類  搜索 內容</title>
</head>

<body>
        {{#def.header}}
        <div class="product_list clearfix content" data-id="{{#def.urlparam.id}}" data-sort="{{#def.urlparam.sort}}" data-order="{{#def.urlparam.order}}" data-page="{{#def.urlparam.page}}" data-size="{{#def.urlparam.size}}">
                <!-- 這裏的def.content預編譯對應的在上一個頁面的def內， -->
                <!-- 而content內的html我也單獨提取出來放到一個頁面內了，方便重複調用 -->
                {{#def.content }}
        </div>
        {{#def.footer}}
        <!-- 這裏只是說有這樣的用法，可是不表明必定要加header或者footer，由於api框架的緣由， -->
        <!-- 我會在上一個頁面內加載header也就是window裏面，而後自適應高度頭部 -->
        <!-- 底部有時候是用tablayout寫，因此也用不到 -->
        
</body>
<script type="text/javascript" src="../js/doT.min.js"></script>
<script type="text/javascript" src="../js/api.js"> </script>
<script src="../js/main.js"></script>
<script src="../js/goodsList_frame.js" charset="utf-8"></script>
<!-- 加一個script標籤用來放原生js也是能夠的，可是爲了防止dot模板衝突，建議仍是放在文件裏經過引用的方式來加載，css也是同樣 -->
</html>

複製代碼
複製代碼

模板 2api

{{?it.list && it.list.length>0}}
{{~it.list:value:index}}
<a href="javascript:;" onclick="openTabFrame(this);" data-id="{{=value.goods_id}}" data-userid="{{=value.user_id}}" data-name="{{=value.goods_name}}" data-saled="{{=value.sales_volume}}" data-price1="{{=value.market_price}}" data-price2="{{=value.shop_price}}"
        data-thumb="{{=value.goods_thumb}}" data-stock="{{=value.goods_number}}" tapmode>
        <img src="{{= DOMAIN + '/'+value.goods_thumb}}" alt="">
        <h3>{{=value.goods_name}}</h3>
        <h4>已賣出{{=value.sales_volume}}件</h4>
        <p>￥{{=value.market_price}}<span>積分20%</span><span>滿50元減5元</span></p>
</a>
{{~}}
{{??}}
{{?}}
複製代碼
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。