本文出自APICloud官方論壇，
感謝論壇版主 gp3098的分享。
之前直接把模板寫在頁面底部的script標籤內的，但是現在不同。 使用了doT.js配合api的loadData方法，整個頁面就是模板。 以前打開frame或者window的時候一直不明白url和data怎麼配合，一直以爲data只能加載到一些靜態的頁面，沒有其他用法。
學習了doT.js的一些高級用法，能夠更好的搭建多頁面程序。
在打開新頁面的時候先通過dot渲染一個頁面然後通過frame或者win的方法來加載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方法
有同步和異步兩種，都進行封裝過，但感覺封裝得不夠好，只展現一個同步，不然代碼不完整。
function loadfile(url) {
return api.readFile({
sync: true,
path: url || '',
});}
複製代碼
還有官方的$api.get方法是不會返回tag用來取消ajax請求的
//json轉url參數
var parseUrl = function(urlparam) {
return Object.keys(urlparam).map(function(key) {
return encodeURIComponent(key) + "=" + encodeURIComponent(urlparam[key]);
}).join("&");
}
複製代碼
模板1
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>
複製代碼
模板 2
{{?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>
{{~}}
{{??}}
{{?}}
複製代碼