Fix back button issue with deeply nested routers

Profiscience · Oct 3, 2016 · 7aae3d3 · 7aae3d3
1 parent ba4dcd1
commit 7aae3d3
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 18 deletions.
diff --git a/dist/ko-component-router.js b/dist/ko-component-router.js
@@ -811,6 +811,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    if (isRoot) {
 	      _knockout2.default.router = this;
+	      _knockout2.default.router.history = _knockout2.default.observableArray([]);
 	    } else {
 	      this.$parent = parentRouterBindingCtx.$router;
 	      this.$parent.$child = this;
@@ -892,7 +893,19 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	      var samePage = this.pathname() === pathname;
 
-	      var shouldNavigatePromise = samePage ? this.$child ? this.$child._update(childPath || '/', viaPathBinding ? state : false, false, viaPathBinding ? query : false) : Promise.resolve(true) : this.runBeforeNavigateCallbacks();
+	      var shouldNavigatePromise = function () {
+	        if (samePage) {
+	          if (_this2.$child) {
+	            var _push = push;
+	            push = false;
+	            return _this2.$child._update(childPath || '/', viaPathBinding ? state : false, _push, viaPathBinding ? query : false);
+	          } else {
+	            return Promise.resolve(true);
+	          }
+	        } else {
+	          return _this2.runBeforeNavigateCallbacks();
+	        }
+	      }();
 
 	      return shouldNavigatePromise.then(function (shouldNavigate) {
 	        if (!shouldNavigate) {
@@ -933,7 +946,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 
 	        if (!samePage || !(0, _utils.deepEquals)(fromCtx.query, toCtx.query)) {
-	          history[push ? 'pushState' : 'replaceState'](history.state, document.title, '' === canonicalPath ? _this2.getBase() : canonicalPath);
+	          var _path = '' === canonicalPath ? _this2.getBase() : canonicalPath;
+
+	          push ? _knockout2.default.router.history.push([history.state, _path]) : _knockout2.default.router.history.splice(_knockout2.default.router.history.length - 1, 1, [history.state, _path]);
+
+	          history[push ? 'pushState' : 'replaceState'](history.state, document.title, _path);
 	        }
 
 	        return new Promise(function (resolve) {

diff --git a/dist/ko-component-router.min.js b/dist/ko-component-router.min.js
diff --git a/example/dist/bundle.js b/example/dist/bundle.js
diff --git a/example/dist/bundle.js.map b/example/dist/bundle.js.map
diff --git a/lib/context.js b/lib/context.js
@@ -47,6 +47,7 @@ var Context = function () {
 
     if (isRoot) {
       _knockout2.default.router = this;
+      _knockout2.default.router.history = _knockout2.default.observableArray([]);
     } else {
       this.$parent = parentRouterBindingCtx.$router;
       this.$parent.$child = this;
@@ -128,7 +129,19 @@ var Context = function () {
 
       var samePage = this.pathname() === pathname;
 
-      var shouldNavigatePromise = samePage ? this.$child ? this.$child._update(childPath || '/', viaPathBinding ? state : false, false, viaPathBinding ? query : false) : Promise.resolve(true) : this.runBeforeNavigateCallbacks();
+      var shouldNavigatePromise = function () {
+        if (samePage) {
+          if (_this2.$child) {
+            var _push = push;
+            push = false;
+            return _this2.$child._update(childPath || '/', viaPathBinding ? state : false, _push, viaPathBinding ? query : false);
+          } else {
+            return Promise.resolve(true);
+          }
+        } else {
+          return _this2.runBeforeNavigateCallbacks();
+        }
+      }();
 
       return shouldNavigatePromise.then(function (shouldNavigate) {
         if (!shouldNavigate) {
@@ -169,7 +182,11 @@ var Context = function () {
         }
 
         if (!samePage || !(0, _utils.deepEquals)(fromCtx.query, toCtx.query)) {
-          history[push ? 'pushState' : 'replaceState'](history.state, document.title, '' === canonicalPath ? _this2.getBase() : canonicalPath);
+          var _path = '' === canonicalPath ? _this2.getBase() : canonicalPath;
+
+          push ? _knockout2.default.router.history.push([history.state, _path]) : _knockout2.default.router.history.splice(_knockout2.default.router.history.length - 1, 1, [history.state, _path]);
+
+          history[push ? 'pushState' : 'replaceState'](history.state, document.title, _path);
         }
 
         return new Promise(function (resolve) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ko-component-router",
-  "version": "3.10.12",
+  "version": "3.10.13",
   "description": "Component-based routing for KnockoutJS",
   "homepage": "https://github.com/Profiscience/ko-component-router",
   "bugs": "https://github.com/Profiscience/ko-component-router/issues",

diff --git a/src/context.js b/src/context.js
@@ -23,6 +23,7 @@ export default class Context {
 
     if (isRoot) {
       ko.router = this
+      ko.router.history = ko.observableArray([])
     } else {
       this.$parent = parentRouterBindingCtx.$router
       this.$parent.$child = this
@@ -79,12 +80,20 @@ export default class Context {
     const [path, params, hash, pathname, querystring, childPath] = route.parse(url)
     const samePage = this.pathname() === pathname
 
-    const shouldNavigatePromise =
-      samePage
-        ? this.$child
-          ? this.$child._update(childPath || '/', viaPathBinding ? state : false, false, viaPathBinding ? query : false)
-          : Promise.resolve(true)
-        : this.runBeforeNavigateCallbacks()
+
+    const shouldNavigatePromise = (() => {
+      if (samePage) {
+        if (this.$child) {
+          const _push = push
+          push = false
+          return this.$child._update(childPath || '/', viaPathBinding ? state : false, _push, viaPathBinding ? query : false)
+        } else {
+          return Promise.resolve(true)
+        }
+      } else {
+        return this.runBeforeNavigateCallbacks()
+      }
+    })()
 
     return shouldNavigatePromise.then((shouldNavigate) => {
       if (!shouldNavigate) {
@@ -131,10 +140,16 @@ export default class Context {
       }
 
       if (!samePage || !deepEquals(fromCtx.query, toCtx.query)) {
+        const path = '' === canonicalPath ? this.getBase() : canonicalPath
+
+        push
+          ? ko.router.history.push([history.state, path])
+          : ko.router.history.splice(ko.router.history.length - 1, 1, [history.state, path])
+
         history[push ? 'pushState' : 'replaceState'](
           history.state,
           document.title,
-          '' === canonicalPath ? this.getBase() : canonicalPath)
+          path)
       }
 
       return new Promise((resolve) => {