本文出自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的使用的更多相关文章

  1. Go template高级用法、深入详解、手册、指南、剖析

    入门示例 以下为test.html文件的内容,里面使用了一个template语法{{.}}. <!DOCTYPE html> <html> <head> <m ...

  2. Visual Studio 宏的高级用法

    因为自 Visual Studio 2012 开始,微软已经取消了对宏的支持,所以本篇文章所述内容只适用于 Visual Studio 2010 或更早期版本的 VS. 在上一篇中,我已经介绍了如何编 ...

  3. SolrNet高级用法（分页、Facet查询、任意分组）

    前言 如果你在系统中用到了Solr的话,那么肯定会碰到从Solr中反推数据的需求,基于数据库数据生产索引后,那么Solr索引的数据相对准确,在电商需求中经常会碰到菜单.导航分类(比如电脑.PC的话会有 ...

  4. sqlalchemy(二)高级用法

    sqlalchemy(二)高级用法 本文将介绍sqlalchemy的高级用法. 外键以及relationship 首先创建数据库,在这里一个user对应多个address,因此需要在address上增 ...

  5. Solr学习总结（六）SolrNet的高级用法（复杂查询，分页，高亮，Facet查询）

    上一篇,讲到了SolrNet的基本用法及CURD,这个算是SolrNet 的入门知识介绍吧,昨天写完之后,有朋友评论说,这些感觉都被写烂了.没错,这些基本的用法,在网上百度,资料肯定一大堆,有一些写的 ...

  6. 再谈Newtonsoft.Json高级用法

    上一篇Newtonsoft.Json高级用法发布以后收到挺多回复的,本篇将分享几点挺有用的知识点和最近项目中用到的一个新点进行说明,做为对上篇文章的补充. 阅读目录 动态改变属性序列化名称 枚举值序列 ...

  7. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

  8. Newtonsoft.Json高级用法(转)

    手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...

  9. redis（二）高级用法

    redis(二)高级用法 事务 redis的事务是一组命令的集合.事务同命令一样都是redis的最小执行单元,一个事务中的命令要么执行要么都不执行. 首先需要multi命令来开始事务,用exec命令来 ...

随机推荐

  1. canvas.toDataURL 由于跨域报错的解决方法

    关于canvas.toDataURL 由于跨域报错的解决方法 用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报 ...

  2. 【p082】排座椅

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 上课的时候总有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了 ...

  3. vueX中使用namespaced

    用法: namespaced:true; getter调用时: this.$store.getters['XXX/getXXX']; commit调用时: this.$store.commit('XX ...

  4. JavaSE基础知识---常用对象API之String类

    一.String类 Java中用String类对字符串进行了对象的封装,这样的好处在于对象封装后可以定义N多属性和行为,就可以对字符串这种常见的数据进行方便的操作. 格式:(1)String s1 = ...

  5. indexdb开cai发keng实zhi践lu

    一直在维护一个用html2canvas截图转base64保存的项目,先不说html2canvas不同版本的不同坑的问题,就说转出来的这个base64字符长度实在太大了,尤其是遇到设计出图高度达到3千多 ...

  6. dotnet core 隐藏控制台

    如果写一个控制台程序,需要隐藏这个控制台程序,可以使用本文的方法 如果是在 Windows 下运行, 可以使用一些系统提供的方法隐藏控制台.如果是 Linux 下,都是控制台,就不用隐藏了 复制下面的 ...

  7. 关于MySQL中查询大数据量的情况下分页limit的性能优化

    https://blog.csdn.net/weixin_37848710/article/details/80772725

  8. Android7_安卓的知识体系梳理

    最近梳理了一下安卓的知识体系,先构建一个整体性的认知,也作为以后的学习路线的依据. [一.从原理角度出发]1.Activity生命周期和启动模式2.View的事件体系与工作原理3.四大组件的工作过程4 ...

  9. hibernate_检索策略

    一.概述 检索策略分三大块,类级别检索策略和关联级别检测策略. 类级别检索策略:get.load. 关联级别检索策略:order.getCustomer().getName() 上面这两种应该是看得懂 ...

  10. Vijos1917 艾酱最喜欢的数字 [求绝对众数]

    1.题意:第一行一个数字N,表示一共有多少个数字,第二行N个数字,保证其中至少有一个数字出现次数超过一半,任务是求出这个出现最多的数. 2.分析:本题是明显的求众数的问题,常规思路为开一个大数组,在读 ...