doT的高级用法及loadData的使用

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了doT的高级用法及loadData的使用相关的知识，希望对你有一定的参考价值。

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

以上是关于doT的高级用法及loadData的使用的主要内容，如果未能解决你的问题，请参考以下文章

Mongo高级用法

sed命令基础及高级用法

高级子查询常见用法及举例

Jenkins高级用法 - Jenkinsfile 介绍及实战经验

TypeScript学习笔记——TS类型/高级用法及实战优缺点

TypeScript学习笔记——TS类型/高级用法及实战优缺点