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的使用的更多相关文章
- Go template高级用法、深入详解、手册、指南、剖析
入门示例 以下为test.html文件的内容,里面使用了一个template语法{{.}}. <!DOCTYPE html> <html> <head> <m ...
- Visual Studio 宏的高级用法
因为自 Visual Studio 2012 开始,微软已经取消了对宏的支持,所以本篇文章所述内容只适用于 Visual Studio 2010 或更早期版本的 VS. 在上一篇中,我已经介绍了如何编 ...
- SolrNet高级用法（分页、Facet查询、任意分组）
前言 如果你在系统中用到了Solr的话,那么肯定会碰到从Solr中反推数据的需求,基于数据库数据生产索引后,那么Solr索引的数据相对准确,在电商需求中经常会碰到菜单.导航分类(比如电脑.PC的话会有 ...
- sqlalchemy(二)高级用法
sqlalchemy(二)高级用法 本文将介绍sqlalchemy的高级用法. 外键以及relationship 首先创建数据库,在这里一个user对应多个address,因此需要在address上增 ...
- Solr学习总结（六）SolrNet的高级用法（复杂查询，分页，高亮，Facet查询）
上一篇,讲到了SolrNet的基本用法及CURD,这个算是SolrNet 的入门知识介绍吧,昨天写完之后,有朋友评论说,这些感觉都被写烂了.没错,这些基本的用法,在网上百度,资料肯定一大堆,有一些写的 ...
- 再谈Newtonsoft.Json高级用法
上一篇Newtonsoft.Json高级用法发布以后收到挺多回复的,本篇将分享几点挺有用的知识点和最近项目中用到的一个新点进行说明,做为对上篇文章的补充. 阅读目录 动态改变属性序列化名称 枚举值序列 ...
- Jquery remove 高级用法
Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...
- Newtonsoft.Json高级用法(转)
手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...
- redis（二）高级用法
redis(二)高级用法 事务 redis的事务是一组命令的集合.事务同命令一样都是redis的最小执行单元,一个事务中的命令要么执行要么都不执行. 首先需要multi命令来开始事务,用exec命令来 ...
随机推荐
- 简单的Spring Batch示例
使用Spring Batch做为批处理框架,可以完成常规的数据量不是特别大的离线计算. 现在写一个简单的入门版示例. 这里默认大家已经掌握了Spring Batch的基本知识,示例只是为了快速上手实践 ...
- 【js】vue 2.5.1 源码学习 （七） 初始化之 initState 响应式系统基本思路
大体思路(六) 本节内容: 一.生命周期的钩子函数的实现 ==> callHook(vm , 'beforeCreate') beforeCreate 实例创建之后 事件数据还未创建 二.初始化 ...
- MySQL视图操作命令详解
内容目录 创建视图 删除视图 修改视图 查看视图 §创建视图 在MySQL中,创建视图的完整语法如下: CREATE [OR REPLACE] [ALGORITHM = {UNDEFINED | ME ...
- linux ioctl 接口
大部分驱动需要 -- 除了读写设备的能力 -- 通过设备驱动进行各种硬件控制的能力. 大 部分设备可进行超出简单的数据传输之外的操作; 用户空间必须常常能够请求, 例如, 设 备锁上它的门, 弹出它的 ...
- 2019-8-31-win10-uwp-使用-WinDbg-调试
title author date CreateTime categories win10 uwp 使用 WinDbg 调试 lindexi 2019-08-31 10:30:35 +0800 201 ...
- 解决应用服务器变为集群后的Session问题
2.2.4.2 解决应用服务器变为集群后的Session问题 先来看一下什么是Session. 用户使用网站的服务,基本上需要浏览器与Web 服务器的多次交互.HTTP 协议本身是无状态的,需要基于H ...
- slim中的请求头
请求头 每个 HTTP 请求都有请求头.这些元数据描述了 HTTP 请求,但在请求体中不可见.Slim 的 PSR 7 请求对象提供了几个检查请求头的方法. 获取所有的请求头,返回一个数组:getHe ...
- Struts2 类型转换(易百教程）
在HTTP请求中的一切都被视为一个String由协议.这包括数字,布尔值,整数,日期,小数和一切.每一件事情是一个字符串,将根据HTTP.然而,Struts类可以有任何数据类型的属性.Struts的自 ...
- [reviewcode] 那些基础comments
多次提醒我,为变量取个合适的名字, so cute person: Not a big deal, but try using variable names better than my_sa 每个参 ...
- Spring Boot 定时+多线程执行
Spring Boot 定时任务有多种实现方式,我在一个微型项目中通过注解方式执行定时任务. 具体执行的任务,通过多线程方式执行,单线程执行需要1小时的任务,多线程下5分钟就完成了. 执行效率提升10 ...