doT的高级用法及loadData的使用

时间 2019-11-08

标签 dot 高级用法 loaddata 使用繁體版

原文原文链接

本文出自APICloud官方论坛，感谢论坛版主 gp3098的分享。javascript

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

学习了doT.js的一些高级用法，可以更好的搭建多页面程序。在打开新页面的时候先经过dot渲染一个页面而后经过frame或者win的方法来加载html代码。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方法有同步和异步两种，都进行封装过，但感受封装得不够好，只展示一个同步，否则代码不完整。java

function loadfile(url) {
    return api.readFile({
        sync: true,
        path: url || '',
    });
}
复制代码
复制代码

还有官方的$api.get方法是不会返回tag用来取消ajax请求的ajax

//json转url参数
var parseUrl = function(urlparam) {
    return Object.keys(urlparam).map(function(key) {
        return encodeURIComponent(key) + "=" + encodeURIComponent(urlparam[key]);
    }).join("&");

}
复制代码
复制代码

模板 1json

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>

复制代码
复制代码

模板 2api

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