本文出自 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>{{~}}
{{??}}
{{?}}
复制代码