Skip to content

Commit 64886a7

Browse files
zhangxinxuzhangxinxu
committed
Merge pull request #73 from zhangxinxu/develop
data-reload more useful
2 parents d2d69d5 + b05f96b commit 64886a7

File tree

7 files changed

+91
-7
lines changed

7 files changed

+91
-7
lines changed

‎ReadMe.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,16 @@ HTML结构需要有一定的要求：
4141
每个page是个满屏元素, 相当于一个独立的页面。
4242

4343
Mobilebone会自动捕获页面上的a元素，如果其href值存在猫腻，就会触发切换行为。例如：
44-
<pre>&lt;a href="#targetPage">target page&lt;/a></pre>
44+
<pre>&lt;a href="#targetPage">目标页面&lt;/a></pre>
45+
46+
当click/tap此元素时候，页面会自动无刷新切换到<code>id</code>为<code>targetPage</code>的页面。
47+
48+
也可以使用ajax请求。例如：
49+
<pre>&lt;a href="detail.php?id=112">请求详情页&lt;/a></pre>
50+
51+
所有ajax请求默认是缓存的，如果你想根据url地址不缓存，可以设置<code>data-reload</code>或者<code>data-reload="true"</code>；如果你想根据url根地址不缓存，需要设置<code>data-reload="root"</code>。
4552

46-
当tap此元素时候，页面会自动无刷新切换到<code>id</code>为<code>targetPage</code>的页面。你可以控制切换的方向，或者使用Ajax获取HTML或JSON, 可以被seajs, requiejs模块化加载(<code>require('mobilebone')</code>)，可以和Backbone组合使用等。
53+
你可以控制切换的方向，可以被seajs, requiejs模块化加载(<code>require('mobilebone')</code>)，可以和Backbone组合使用等。
4754

4855
当然，上面介绍的，只是强大功能的冰山一角，更多信息请[参考这里](http://www.zhangxinxu.com/wordpress/?p=4381).
4956

‎docs/data-reload.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
6+
<title>Mobilebone.js API文档-data-reload</title>
7+
<link rel="stylesheet" href="../src/mobilebone.css">
8+
<link rel="stylesheet" href="docs.css">
9+
</head>
10+
11+
<body>
12+
<aside></aside>
13+
<div class="page out">
14+
<div class="content">
15+
<h2>data-reload</h2>
16+
<p>主要针对Ajax请求。默认情况下，Mobilebone会缓存所有的Ajax请求，也就是第二次点击同样地址的时候，不是去重新拉数据，而是直接显示之前已经加载的页面。但是，如果你希望请求的页面不被缓存（每次都重新加载页面），则就需要使用这里的<code>data-reload</code>参数。</p>
17+
<p>目前有两种使用场景：</p>
18+
<ol>
19+
<li><strong>url完整地址重加载</strong>：<code>data-reload</code>/<code>data-reload="true"</code>.</li>
20+
<li><strong>url根地址重新加载</strong>：<code>data-reload="root"</code> (v2.3.2+)</li>
21+
</ol>
22+
<p>分别表示什么意思呢？</p>
23+
<h4>url完整地址重加载</h4>
24+
<p>如下两个请求：</p>
25+
<pre>&lt;a href="detail.php?id=112" data-reload="true">请求详情页&lt;/a></pre>
26+
<pre>&lt;a href="detail.php?id=113" data-reload="true">请求详情页&lt;/a></pre>
27+
<p>可以看到查询<code>id</code>是不一样的。所谓“完整地址重加载”是指，只有在第二次请求的页面<code>url</code>(包括查询字符串)完全匹配的时候，才移除缓存，重新加载！</p>
28+
<p>比方说上面的两个请求，最后页面HTML会有两个独立的页面。</p>
29+
<h4>url根地址重加载</h4>
30+
<p>请求地址还是一样，但<code>data-reload</code>值为<code>root</code>:</p>
31+
<pre>&lt;a href="detail.php?id=112" data-reload="root">请求详情页&lt;/a></pre>
32+
<pre>&lt;a href="detail.php?id=113" data-reload="root">请求详情页&lt;/a></pre>
33+
<p>这里的就是“根地址重加载”，指只要Ajax请求的url的根地址是一样的，就不会缓存，直接清除之前同源页面。</p>
34+
<p>所以，这里，页面上永远最多就一个详情页对应HTML. 很多小伙伴喜欢使用全局<code>id</code>绑定事件，此时，就务必需要设置<code>data-reload="root"</code>, 以免<code>id</code>冲突，事件重复绑定等问题。</p>
35+
</div>
36+
</div>
37+
38+
<script src="../src/mobilebone.js"></script>
39+
<script>
40+
Mobilebone.captureLink = false;
41+
window.navKey = "data-reload";
42+
</script>
43+
<script src="nav.js"></script>
44+
<script src="docs.js"></script>
45+
</body>
46+
</html>

‎docs/nav.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
var key = window.navKey, html = '<nav>', active = '', matchs = false;
66

7-
["Mobilebone.support", "Mobilebone.VERSION", "Mobilebone.autoInit", "Mobilebone.captureLink", "Mobilebone.captureForm", "Mobilebone.rootTransition", "Mobilebone.mergeCallback", "Mobilebone.classAnimation", "Mobilebone.classPage", "Mobilebone.classMask", "Mobilebone.pushStateEnabled", "Mobilebone.transition()", "Mobilebone.getCleanUrl()", "Mobilebone.getPage()", "Mobilebone.createPage()", "Mobilebone.getFunction()", "Mobilebone.ajax()", "Mobilebone.submit()", "Mobilebone.isBack()", "Mobilebone.jsonHandle()", "Mobilebone.init()", "Mobilebone.handleTapEvent()", "otherAnonymousAPIs", "data-title", "data-root", "data-form", "data-params", "data-callbackKeys", "data-mask", "data-rel", "data-ajax", "data-ajaxKeys", "data-preventDefault", "data-container", "data-classPage"].forEach(function(innerhtml) {
7+
["Mobilebone.support", "Mobilebone.VERSION", "Mobilebone.autoInit", "Mobilebone.captureLink", "Mobilebone.captureForm", "Mobilebone.rootTransition", "Mobilebone.mergeCallback", "Mobilebone.classAnimation", "Mobilebone.classPage", "Mobilebone.classMask", "Mobilebone.pushStateEnabled", "Mobilebone.transition()", "Mobilebone.getCleanUrl()", "Mobilebone.getPage()", "Mobilebone.createPage()", "Mobilebone.getFunction()", "Mobilebone.ajax()", "Mobilebone.submit()", "Mobilebone.isBack()", "Mobilebone.jsonHandle()", "Mobilebone.init()", "Mobilebone.handleTapEvent()", "otherAnonymousAPIs", "data-title", "data-root", "data-form", "data-params", "data-callbackKeys", "data-mask", "data-rel", "data-ajax", "data-reload", "data-ajaxKeys", "data-preventDefault", "data-container", "data-classPage"].forEach(function(innerhtml) {
88
if (matchs == true) {
99
active = '';
1010
} else if (key && (key == innerhtml || new RegExp(key).test(innerhtml))) {

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mobilebone",
3-
"version": "2.3.1",
3+
"version": "2.3.2",
44
"description": "Bone main for mobile web APP with a sigle page mode.",
55
"main": "src/mobilebone.js",
66
"directories": {

‎src/mobilebone.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
*
3939
* @type string
4040
**/
41-
Mobilebone.VERSION = '2.3.1';
41+
Mobilebone.VERSION = '2.3.2';
4242

4343
/**
4444
* Whether catch attribute of href from element with tag 'a'
@@ -437,7 +437,7 @@
437437
*
438438
**/
439439
Mobilebone.createPage = function(dom_or_html, element_or_options, options) {
440-
var response = null, container = null, classPage = this.classPage;
440+
var response = null, container = null, classPage = this.classPage, is_root = false;
441441
// 'element_or_options' can '.page element', or 'a element', or 'options'
442442
// basically, options = ajax options, of course, u can custom it!
443443
if (!dom_or_html) return;
@@ -460,6 +460,8 @@
460460
classPageInside = element_or_options.getAttribute("data-classpage");
461461
// pass element as target params, add on v2.3.0
462462
optionsTransition.target = element_or_options;
463+
// weather is root reload
464+
is_root = element_or_options.getAttribute("data-reload") == "root";
463465
} else {
464466
response = element_or_options.response || options.response;
465467
page_title = element_or_options.title || options.title;
@@ -503,7 +505,10 @@
503505

504506
// do transition
505507
optionsTransition.response = response || dom_or_html;
506-
optionsTransition.id = this.getCleanUrl(element_or_options) || create_page.id || ("unique" + Date.now());
508+
optionsTransition.id = this.getCleanUrl(element_or_options) || create_page.id || ("unique" + Date.now());
509+
if (is_root == true) {
510+
optionsTransition.id = optionsTransition.id.split("?")[0];
511+
}
507512
// 'if' statement below added on v2.0.0
508513
if (typeof options == "object") {
509514
if (typeof options.history != "undefined") {

‎test/ajax-html/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
<ul>
2323
<li><a href="ajax-without-page.html" data-title="纯a标签元素返回页面">点击加载-返回不含page, 自动创建page</a></li>
2424
</ul>
25+
<ul>
26+
<li><a href="root-reload.php?id=1" data-reload="root">根地址不缓存1</a></li>
27+
<li><a href="root-reload.php?id=2" data-reload="root">根地址不缓存2</a></li>
28+
</ul>
2529
<ul>
2630
<li><a href="b.html">连续加载测试-加载b页面</a></li>
2731
</ul>
@@ -47,6 +51,13 @@
4751
});
4852
ele.querySelector(".result").innerHTML += 'inited! ';
4953
};
54+
55+
var root_reload = function() {
56+
var show = document.getElementById("idShow"), should = document.getElementById("idShould");
57+
if (show && should) {
58+
show.innerHTML = should.innerHTML;
59+
}
60+
};
5061
</script>
5162
</body>
5263
</html>

‎test/ajax-html/root-reload.php

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<html>
2+
<head>
3+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4+
<title>根地址无缓存加载测试<?php echo $_GET['id']; ?></title>
5+
</head>
6+
7+
<body>
8+
<div class="page out" data-callback="root_reload">
9+
<p>document.getElementById("idShow").innerHTML是：<strong id="idShow">&nbsp;</strong>，应该结果是<strong id="idShould"><?php echo $_GET['id']; ?></strong>.</p>
10+
<ul>
11+
<li><a href="#pageHome" data-rel="back">返回</a></li>
12+
</ul>
13+
</div>
14+
</body>
15+
</html>

0 commit comments

Comments
 (0)