Merge pull request #32 from zhangxinxu/develop

Develop

Author: zhangxinxu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobilebone",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Bone main for mobile web APP with a sigle page mode.",
   "main": "src/mobilebone.js",
   "directories": {

src/mobilebone.js

@@ -40,7 +40,7 @@
 	 *
 	 * @type string
 	**/
-	Mobilebone.VERSION = '2.0.1';
+	Mobilebone.VERSION = '2.0.2';
 
 	/**
 	 * Whether catch attribute of href from element with tag 'a'
@@ -175,13 +175,13 @@
 					var local_function_key = element.getAttribute("data-" + key) || _dataparams[key];
 					if (typeof _params.root[local_function_key] == "function") {		
 						_params[key] = function() {
-							defaults[key].apply(null, arguments);
-							_params.root[local_function_key].apply(null, arguments);
+							defaults[key].apply(this, arguments);
+							_params.root[local_function_key].apply(this, arguments);
 						}
 					} else if (typeof options[key] == "function") {
 						_params[key] = function() {
-							defaults[key].apply(null, arguments);
-							options[key].apply(null, arguments);
+							defaults[key].apply(this, arguments);
+							options[key].apply(this, arguments);
 						}
 					} else {
 						_params[key] = defaults[key];
@@ -208,7 +208,7 @@
 			// do fallback every time
 			var fallback = params_out.fallback;
 			if (typeof fallback == "string") fallback = params_out.root[fallback];
-			if (typeof fallback == "function") fallback(pageInto, pageOut, options.response);
+			if (typeof fallback == "function") fallback.call(params_out.root, pageInto, pageOut, options.response);
 		}
 		if (pageInto != null && pageInto.classList) {		
 			// for title change
@@ -302,8 +302,9 @@
 
 			// do callback every time
 			var callback = params_in.callback;
+			
 			if (typeof callback == "string") callback = params_in.root[callback];
-			if (typeof callback == "function") callback(pageInto, pageOut, options.response);
+			if (typeof callback == "function") callback.call(params_in.root, pageInto, pageOut, options.response);
 		}
 	};
 
@@ -726,7 +727,8 @@
 		if (hasInited == true) return 'Don\'t repeat initialization!';	
 		var hash = location.hash.replace("#&", "#"), ele_in = null;
 		if (hash == "" || hash == "#") {
-			this.transition(document.querySelector("." + this.classPage));
+			store._initPage = document.querySelector("." + this.classPage);
+			this.transition(store._initPage);
 		} else if (isSimple.test(hash) == true && (ele_in = document.querySelector(hash)) && ele_in.classList.contains(this.classPage)) { // 'ele_in' must be a page element
 			this.transition(ele_in);	
 		} else {
@@ -908,10 +910,14 @@
 	 * page change when history change
 	**/
 	window.addEventListener("popstate", function() {
-		var hash = location.hash.replace("#&", "").replace("#", "");
-		if (hash == "") return;
-		
-		var page_in = store[hash];
+		var hash = location.hash.replace("#&", "").replace("#", ""), page_in = null;
+		if (hash == "") {
+			// if no hash, get init page as 'page_in'
+			page_in = store._initPage;
+			if (!page_in) return;			
+		} else {
+			page_in = store[hash];
+		}
 
 		if (!page_in) {
 			if(isSimple.test(hash) == false) {

test/callback/index.html

@@ -26,7 +26,7 @@ <h2>主页</h2>
     </ul>
     <p></p>
 </div>
-<div id="page1" class="page out" data-params="animationstart=start&amp;animationend=end">
+<div id="page1" class="page out" data-callback="callback" data-params="animationstart=start&amp;animationend=end">
     <a href="#pageHome" data-rel="back">&laquo;返回1</a>
     <p></p>
 </div>
@@ -55,6 +55,9 @@ <h2>主页</h2>
 		into: "进入",
 		out: "离开"
 	},
+	callback: function() {
+		console.log(this.status.into = "回调执行！this对应的是Fun!");
+	},
 	home: function(pageInto, pageOut, response) {
 		pageInto.querySelector("p").innerHTML += "首次载入时间是：" + this.time() + "<br>";
 	},
@@ -65,6 +68,17 @@ <h2>主页</h2>
 		page.querySelector("p").innerHTML += "页面"+ this.status[into_or_out] +"动画完成，时间是：" + this.time() + "<br>";
 	}
 };
+// 2014-12-28新增回调合并时候的上下文测试
+Mobilebone.callback = function() {
+	// 上下文为当前page回调所在的对象，例如本测试页面：
+	// 1. 默认为Fun;
+	// 2. page2因为root=window, 因此上下文为window
+	// 3. 页面3则是 callback_page.test_obj
+	// 需要注意的是，如果存在回调合并的情况，其公用同一个上下文this, 值同上规则
+	console.log("全局回调上下文this: ");
+	console.log(this);
+};
+
 
 window.callback_page = function(page) {
 	// 按钮居中

test/history/ajax-page.html

@@ -5,6 +5,6 @@
 </head>
 
 <body>
-<div class="page out"><a href="#pageHome" data-rel="back">返回</a></div>
+<div class="page out"><a href="javascript:" data-rel="back">返回</a></div>
 </body>
 </html>

test/history/history.html

@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<div id="pageHome" class="page out">
+<div class="page out">
     <ul>
         <li><a href="#page1">浏览器返回测试-页面1</a></li>
         <li><a href="#page2">浏览器返回测试-页面2</a></li>
@@ -22,9 +22,9 @@
         <li><a href="../index.html" data-ajax="false">&laquo; 返回测试引导首页</a></li>
     </ul>
 </div>
-<div id="page1" class="page out"><a href="#pageHome" data-rel="back">&laquo;返回1</a></div>
-<div id="page2" class="page out"><a href="#pageHome" data-rel="back">&laquo;返回2</a></div>
-<div id="page3" class="page out"><a href="#pageHome" data-rel="back">&laquo;返回3</a></div>
+<div id="page1" class="page out"><a href="javascript:" data-rel="back">&laquo;返回1</a></div>
+<div id="page2" class="page out"><a href="javascript:" data-rel="back">&laquo;返回2</a></div>
+<div id="page3" class="page out"><a href="javascript:" data-rel="back">&laquo;返回3</a></div>
 
 <script src="../../src/mobilebone.js"></script>
 </body>