Skip to content
This repository has been archived by the owner on Dec 19, 2017. It is now read-only.

Commit

Permalink
Fix ctx.forceReloadOnParamChange & add ctx.forceReloadOnQueryChange
Browse files Browse the repository at this point in the history
  • Loading branch information
@caseyWebb
caseyWebb committed Oct 5, 2016
1 parent 3dcae69 commit 438c910
Show file tree
Hide file tree
Showing 8 changed files with 101 additions and 41 deletions.
32 changes: 24 additions & 8 deletions dist/ko-component-router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -912,16 +912,24 @@ return /******/ (function(modules) { // webpackBootstrap
return Promise.resolve(false);
}

if (!samePage && !firstRun || _this2.config._forceReload) {
if (!query && querystring) {
query = _qs2.default.parse(querystring)[(0, _utils.normalizePath)(_this2.config.depth + pathname)];
}

var paramsChanged = !(0, _utils.deepEquals)(params, _this2.prevParams);
var queryChanged = query && !(0, _utils.deepEquals)(query, _this2.prevQuery);

_this2.prevParams = params;
if (query) {
_this2.prevQuery = query;
}

if (!samePage && !firstRun || _this2.config._forceReloadOnParamChange && paramsChanged || _this2.config._forceReloadOnQueryChange && queryChanged) {
_this2.isNavigating(true);
_this2.reload();
_this2._beforeNavigateCallbacks = [];
}

if (!query && querystring) {
query = _qs2.default.parse(querystring)[(0, _utils.normalizePath)(_this2.config.depth + pathname)];
}

var canonicalPath = Context.getCanonicalPath(_this2.getBase().replace(/\/$/, ''), pathname, childPath, _this2.query.getFullQueryString(query, pathname), hash);

var toCtx = {
Expand Down Expand Up @@ -959,17 +967,20 @@ return /******/ (function(modules) { // webpackBootstrap
delete toCtx.query;
toCtx.route.runPipeline(toCtx).then(function () {
if (fromCtx.route.component === toCtx.route.component) {
if (_this2.config._forceReload) {
if (_this2.config._forceReloadOnParamChange && paramsChanged || _this2.config._forceReloadOnQueryChange && queryChanged) {
var r = toCtx.route;
_this2.config._forceReload = false;
toCtx.route = { component: '__KO_ROUTER_EMPTY_COMPONENT__' };
_this2.config._forceReloadOnParamChange = false;
_this2.config._forceReloadOnQueryChange = false;
(0, _utils.extend)(_this2, toCtx);
_knockout2.default.tasks.runEarly();
_this2.route(r);
} else {
(0, _utils.merge)(_this2, toCtx);
}
} else {
_this2.config._forceReloadOnParamChange = false;
_this2.config._forceReloadOnQueryChange = false;
(0, _utils.extend)(_this2, toCtx);
}

Expand Down Expand Up @@ -1021,7 +1032,12 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: 'forceReloadOnParamChange',
value: function forceReloadOnParamChange() {
this.config._forceReload = true;
this.config._forceReloadOnParamChange = true;
}
}, {
key: 'forceReloadOnQueryChange',
value: function forceReloadOnQueryChange() {
this.config._forceReloadOnQueryChange = true;
}
}, {
key: 'getRouteForUrl',
Expand Down
4 changes: 2 additions & 2 deletions dist/ko-component-router.min.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions example/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ ko.components.register('app', {
<li><a data-bind="path: '/context#update'">update</a></li>
<li><a data-bind="path: '/context#addBeforeNavigateCallback'">addBeforeNavigateCallback</a></li>
<li><a data-bind="path: '/context#forceReloadOnParamChange'">forceReloadOnParamChange</a></li>
<li><a data-bind="path: '/context#forceReloadOnQueryChange'">forceReloadOnQueryChange</a></li>
<li><a data-bind="path: '/context#parent'">$parent</a></li>
<li><a data-bind="path: '/context#child'">$child</a></li>
</ul>
Expand Down
26 changes: 13 additions & 13 deletions example/dist/bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion example/dist/bundle.js.map
View file

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions example/views/ctx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,16 @@ class ViewModel {
</p>
</section>
<h2 id="forceReloadOnQueryChange">
forceReloadOnQueryChange
<small class="text-muted">() => {}</small>
</h2>
<p>
tells the router to reload the current route component when query params change rather than allowing
the component to subscribe to <code>ctx.query.get('foo')</code>/<code>ctx.query.getAll(true)</code> or wrap it in a computed.
</p>
</section>
<section>
<h2 id="parent">
$parent
Expand Down
32 changes: 24 additions & 8 deletions lib/context.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,16 +148,24 @@ var Context = function () {
return Promise.resolve(false);
}

if (!samePage && !firstRun || _this2.config._forceReload) {
if (!query && querystring) {
query = _qs2.default.parse(querystring)[(0, _utils.normalizePath)(_this2.config.depth + pathname)];
}

var paramsChanged = !(0, _utils.deepEquals)(params, _this2.prevParams);
var queryChanged = query && !(0, _utils.deepEquals)(query, _this2.prevQuery);

_this2.prevParams = params;
if (query) {
_this2.prevQuery = query;
}

if (!samePage && !firstRun || _this2.config._forceReloadOnParamChange && paramsChanged || _this2.config._forceReloadOnQueryChange && queryChanged) {
_this2.isNavigating(true);
_this2.reload();
_this2._beforeNavigateCallbacks = [];
}

if (!query && querystring) {
query = _qs2.default.parse(querystring)[(0, _utils.normalizePath)(_this2.config.depth + pathname)];
}

var canonicalPath = Context.getCanonicalPath(_this2.getBase().replace(/\/$/, ''), pathname, childPath, _this2.query.getFullQueryString(query, pathname), hash);

var toCtx = {
Expand Down Expand Up @@ -195,17 +203,20 @@ var Context = function () {
delete toCtx.query;
toCtx.route.runPipeline(toCtx).then(function () {
if (fromCtx.route.component === toCtx.route.component) {
if (_this2.config._forceReload) {
if (_this2.config._forceReloadOnParamChange && paramsChanged || _this2.config._forceReloadOnQueryChange && queryChanged) {
var r = toCtx.route;
_this2.config._forceReload = false;
toCtx.route = { component: '__KO_ROUTER_EMPTY_COMPONENT__' };
_this2.config._forceReloadOnParamChange = false;
_this2.config._forceReloadOnQueryChange = false;
(0, _utils.extend)(_this2, toCtx);
_knockout2.default.tasks.runEarly();
_this2.route(r);
} else {
(0, _utils.merge)(_this2, toCtx);
}
} else {
_this2.config._forceReloadOnParamChange = false;
_this2.config._forceReloadOnQueryChange = false;
(0, _utils.extend)(_this2, toCtx);
}

Expand Down Expand Up @@ -257,7 +268,12 @@ var Context = function () {
}, {
key: 'forceReloadOnParamChange',
value: function forceReloadOnParamChange() {
this.config._forceReload = true;
this.config._forceReloadOnParamChange = true;
}
}, {
key: 'forceReloadOnQueryChange',
value: function forceReloadOnQueryChange() {
this.config._forceReloadOnQueryChange = true;
}
}, {
key: 'getRouteForUrl',
Expand Down
35 changes: 26 additions & 9 deletions src/context.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ export default class Context {
const [path, params, hash, pathname, querystring, childPath] = route.parse(url)
const samePage = this.pathname() === pathname


const shouldNavigatePromise = (() => {
if (samePage) {
if (this.$child) {
Expand All @@ -100,16 +99,26 @@ export default class Context {
return Promise.resolve(false)
}

if ((!samePage && !firstRun) || this.config._forceReload) {
if (!query && querystring) {
query = qs.parse(querystring)[normalizePath(this.config.depth + pathname)]
}

const paramsChanged = !deepEquals(params, this.prevParams)
const queryChanged = query && !deepEquals(query, this.prevQuery)

this.prevParams = params
if (query) {
this.prevQuery = query
}

if ((!samePage && !firstRun) ||
(this.config._forceReloadOnParamChange && paramsChanged) ||
(this.config._forceReloadOnQueryChange && queryChanged)) {
this.isNavigating(true)
this.reload()
this._beforeNavigateCallbacks = []
}

if (!query && querystring) {
query = qs.parse(querystring)[normalizePath(this.config.depth + pathname)]
}

const canonicalPath = Context
.getCanonicalPath(
this.getBase().replace(/\/$/, ''),
Expand Down Expand Up @@ -159,17 +168,21 @@ export default class Context {
toCtx.route.runPipeline(toCtx)
.then(() => {
if (fromCtx.route.component === toCtx.route.component) {
if (this.config._forceReload) {
if ((this.config._forceReloadOnParamChange && paramsChanged) ||
(this.config._forceReloadOnQueryChange && queryChanged)) {
const r = toCtx.route
this.config._forceReload = false
toCtx.route = { component: '__KO_ROUTER_EMPTY_COMPONENT__' }
this.config._forceReloadOnParamChange = false
this.config._forceReloadOnQueryChange = false
extend(this, toCtx)
ko.tasks.runEarly()
this.route(r)
} else {
merge(this, toCtx)
}
} else {
this.config._forceReloadOnParamChange = false
this.config._forceReloadOnQueryChange = false
extend(this, toCtx)
}

Expand Down Expand Up @@ -216,7 +229,11 @@ export default class Context {
}

forceReloadOnParamChange() {
this.config._forceReload = true
this.config._forceReloadOnParamChange = true
}

forceReloadOnQueryChange() {
this.config._forceReloadOnQueryChange = true
}

getRouteForUrl(url) {
Expand Down

0 comments on commit 438c910

Please sign in to comment.