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

站在用戶的角度思考問題，與客戶深入溝通，找到鶴山網(wǎng)站設(shè)計與鶴山網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋鶴山地區(qū)。

之前直接把模板寫在頁面底部的script標簽內(nèi)的，但是現(xiàn)在不同。?使用了doT.js配合api的loadData方法，整個頁面就是模板。?以前打開frame或者window的時候一直不明白url和data怎么配合，一直以為data只能加載到一些靜態(tài)的頁面，沒有其他用法。

學(xué)習(xí)了doT.js的一些高級用法，能夠更好的搭建多頁面程序。
在打開新頁面的時候先通過dot渲染一個頁面然后通過frame或者win的方法來加載html代碼。

//數(shù)據(jù)渲染到frame的內(nèi)容區(qū)域//默認只渲染第一頁
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, //第二個模板用于重復(fù)使用   在加載更多內(nèi)容時候使用
                    urlparam: param,
            };
            var tempFn = doT.template(template, undefined, def); //生成渲染模板的函數(shù)
            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的真實內(nèi)容在html這里?。?！
                    // console.warn(html);
                    //通過loadData方式把頁面加載到frame中，通過參數(shù)改變，每次重新加載frame內(nèi)容
                    api.loadData({
                            frameName: 'goods_list',
                            url: 'widget://mall/components/', //要加載的頁面，data內(nèi)的css、js的路徑的根路徑！??！
                            data: html //dot渲染出來的html頁面  成為frame的內(nèi)容，生成的frame頁面整個頁面都可以用dot模板語法因為整個頁面就是模板
                    });
            }, 'json');
    }

復(fù)制代碼
這里的loadfile是官方的api方法
有同步和異步兩種，都進行封裝過，但感覺封裝得不夠好，只展現(xiàn)一個同步，不然代碼不完整。

function loadfile(url) {
return api.readFile({
sync: true,
path: url || '',
});
}
復(fù)制代碼
還有官方的$api.get方法是不會返回tag用來取消ajax請求的

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

}
復(fù)制代碼
模板1

var template = loadfile('widget://mall/components/goodsList_frame.html');//對應(yīng)的模板文件在下面
復(fù)制代碼

{{#def.header}}

{{#def.footer}}

復(fù)制代碼
模板 2
{{?it.list && it.list.length>0}}
{{~it.list:value:index}}
data-thumb="{{=value.goods_thumb}}" data-stock="{{=value.goods_number}}" tapmode>

{{=value.goods_name}}

已賣出{{=value.sales_volume}}件

￥{{=value.market_price}}積分20%滿50元減5元

{{~}}
{{??}}
{{?}}
復(fù)制代碼

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前題目：doT的高級用法及l(fā)oadData的使用-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://weahome.cn/article/gjhij.html