doT的高级用法def编译时定义以及loadData的使用

gp3098

本帖最后由 gp3098 于 2019-8-1 21:16 编辑

以前都是直接把模板写在页面底部的script标签内的，但是现在不一样了。
使用了doT.js配合api的loadData方法，整个页面就是模板了。
以前打开frame或者window的时候一直不明白url和data怎么配合，一直以为data只能加载到一些静态的页面，没有其他用法。

但是经过一段时间的学习之后，学习了doT.js的一些高级用法，感觉能够帮助我更好的搭建多页面程序。
1.在打开新页面的时候先通过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("&");
}

复制代码

然后是模板文件

gp3098

本帖最后由 gp3098 于 2019-8-1 21:22 编辑

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 }}

      </div>

      {{#def.footer}}

      

      

      



</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>



</html>

复制代码

gp3098

{{?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>
{{~}}
{{??}}
{{?}}

复制代码

gp3098

然后是template2的内容在3楼

gp3098

如果有用过我的方法或者类似的方法请拿出来交流一下，互相学习

顺便如果有谁看出什么bug或者不完善的地方也请指点一二

hkeda

还能这样玩啊

gp3098

hkeda 发表于 2019-8-3 11:35
还能这样玩啊

去试试吧，告诉我如何

技术咨询-F

不错

gp3098

用这个方法还是会遇到问题的，比如在编译的时候选择加密，读取出来的模板文件会乱码，这时候要看模板文件的格式如果是html读取出来的是乱码，不过如果是其他格式就不会了。