一、缓存详情页内容(归类:单个页面缓存数据,通过传入的 id 获取):
思路:通过 api.readFile 根据 giftid 读取缓存数据,如果有,执行 if();如果没有,执行 else ,通过 ajax 请求获取数据并使用 api.writeFile 存储数据,方便下次获取。
结合以上例子说具体点就是:
1、板块二中需要以下代码获取 id,而板块一中只需用上一个页面传来的 id:
<div class="detail" id="listData"></div> <script id="section" type="text/doTtemplate"> {{ }} <div class="des"> <div class="com">所需积分: <span>{{=it.INTEGRAL}}</span> 分</div> < div class="com">兑换限量: {{=it.Num || '不限'}} </div> <div class="com">配送说明: <span>免费包邮</span>({{=it.PEISONG}})</div> </div> {{ }} </script>js部分:
思路:通过 api.readFile 根据 giftid 读取缓存数据,如果有,执行 if();如果没有,执行 else ,通过 ajax 请求获取数据并使用 api.writeFile 存储数据,方便下次获取。
function getDetailData(giftId){ var cacheDir = api.cacheDir; api.readFile({ path: cacheDir + '/' + giftId + '/' + api.frameName + '.json' }, function(ret, err){ if(ret.status){ var addDatalistCardTpl = doT.template(document.getElementById('section').innerHTML); document.getElementById("listData").insertAdjacentHTML('beforeEnd', addDatalistCardTpl(JSON.parse(ret.data))); }else{ var param = { GIFT_ID: giftId } boktour._postAjax( boktour._url+'Integral.aspx', { UserId: $api.getStorage('LOGIN_DATA').UserId, CompanyId: $api.getStorage('LOGIN_DATA').CompanyId, Action: 'getProductDetail', Param: JSON.stringify(param) }, function(ret){ if(ret.Data && ret.Data!=''){ api.writeFile({ path: cacheDir + '/' + giftId + '/' + api.frameName + '.json', data: JSON.stringify(ret.Data) }) var addDatalistCardTpl = doT.template(document.getElementById('section').innerHTML); document.getElementById("listData").insertAdjacentHTML('beforeEnd', addDatalistCardTpl(ret.Data)); } else { document.getElementById("listData").innerHTML = '<div class="fa18 pd10">暂无更多详情</div>'; } } ) } }) }二、缓存 frameGroup 下的 frame 中列表数据内容(归类:多个 frame 缓存数据,通过 frame 获取的 id 获取数据):
<div class="row pd list" id="listCard"> </div> <script id="listBox" type="text/doTtemplate"> {{ for(var i in it){ }} <div class="col-xs-4"> <div class="item" tapmode > <img src="{{=it[i].PIC}}" alt="" /> </div> <div class="des">{{=it[i].LINETYPE_NAME}}</div> </div> {{ } }} </script>js部分:
function getProductList(){ var cacheDir = api.cacheDir, id; switch (api.frameName) { case '1': id = $api.getStorage('productGID'); break; case '2': id = $api.getStorage('productCID'); break; case '3': id = $api.getStorage('productZID'); break; } api.readFile({ path: cacheDir + '/' + id + '/' + api.frameName + '.json' }, function(ret,err){ if(ret.status){ var listBoxTpl = doT.template(document.getElementById('listBox').innerHTML); document.getElementById("listCard").innerHTML = listBoxTpl(JSON.parse(ret.data)); }else{ var param = { TYPE_FLAG: api.frameName } boktour._postAjax( boktour._url + 'Line.aspx', { UserId: $api.getStorage('LOGIN_DATA').UserId, CompanyId: $api.getStorage('LOGIN_DATA').CompanyId, Action: 'getLineType', Param: JSON.stringify(param) }, function(RET){ if(RET.Data && RET.Data.length > 0){ api.writeFile({ path: cacheDir + '/' + RET.Data[0].LINETYPE_ID + '/' + api.frameName + '.json', data: JSON.stringify(RET.Data) }) var listBoxTpl = doT.template(document.getElementById('listBox').innerHTML); document.getElementById("listCard").insertAdjacentHTML('beforeEnd', listBoxTpl(ret.Data)); switch (api.frameName) { case '1': $api.setStorage('productGID', RET.Data[0].LINETYPE_ID); break; case '2': $api.setStorage('productCID', RET.Data[0].LINETYPE_ID); break; case '3': $api.setStorage('productZID', RET.Data[0].LINETYPE_ID); break; default: break; } } else { document.getElementById("listCard").innerHTML = '<div class="fa18 pd10">暂无产品线路</div>'; } } ) } }) }板块一与板块二的区别:
板块一为单个页面,只需通过传入商品的 id,便可获得相关数据;可也判断是否有该 id 的数据。
板块二为 frameGroup 中的多个 frame,每个 frame 对应一个 id,在存入缓存时需要动态获取一个 id,在有相关数据时加载页面,动态获取 id,再通过该 id,获取缓存数据并加载。
1、板块二中需要以下代码获取 id,而板块一中只需用上一个页面传来的 id:
switch (api.frameName) { case '1': id = $api.getStorage('productGID'); break; case '2': id = $api.getStorage('productCID'); break; case '3': id = $api.getStorage('productZID'); break; }2、板块二中需要以下代码存入 id,而板块一不需要:
switch (api.frameName) { case '1': $api.setStorage('productGID', RET.Data[0].LINETYPE_ID); break; case '2': $api.setStorage('productCID', RET.Data[0].LINETYPE_ID); break; case '3': $api.setStorage('productZID', RET.Data[0].LINETYPE_ID); break; default: break; }注:在 ajax 获取到数据后,使用 api.writeFile 存储数据时,需先将数据转格式, 使用 api.readFile 读取数据时再转回来:
api.writeFile({ path: cacheDir + '/' + RET.Data[0].LINETYPE_ID + '/' + api.frameName + '.json', data: JSON.stringify(RET.Data); //此处 JSON.stringify 转格式 }) api.readFile({ path: cacheDir + '/' + id + '/' + api.frameName + '.json' }, function(ret,err){ if(ret.status){ var listBoxTpl = doT.template(document.getElementById('listBox').innerHTML); document.getElementById("listCard").innerHTML = listBoxTpl(JSON.parse(ret.data)); //此处 JSON.parse 转格式 }