Added strict flag to ignite router view to allow stricter route control.

This commit is contained in:
Matt Mo 2021-01-25 00:38:18 -08:00
parent 8ca79aaead
commit b821e2e88a

View File

@ -86,7 +86,8 @@ class RouterView extends IgniteElement {
get properties() { get properties() {
return { return {
show: false, show: false,
routes: [] routes: [],
strict: false
}; };
} }
@ -103,9 +104,16 @@ class RouterView extends IgniteElement {
update() { update() {
var routeMatches = false; var routeMatches = false;
//Check all of the possible routes until we find a match. //Based on whether we are strict matching or not check if we have a match.
for (var i = 0; i < this.routes.length && !routeMatches; i++) { if (!this.strict) {
routeMatches = RouteMatcher.matches(this.routes[i]); for (var i = 0; i < this.routes.length && !routeMatches; i++) {
routeMatches = RouteMatcher.matches(this.routes[i]);
}
} else {
routeMatches = true;
for (var i = 0; i < this.routes.length && routeMatches; i++) {
routeMatches = RouteMatcher.matches(this.routes[i]);
}
} }
//If we found a match show this router view if it's not already visible, otherwise hide it. //If we found a match show this router view if it's not already visible, otherwise hide it.
@ -235,16 +243,18 @@ class RouterViewTemplate extends IgniteTemplate {
/** /**
* Initializes a new router view. * Initializes a new router view.
* @param {String|String[]} routes Single or multiple routes to trigger this view to render. * @param {String|String[]} routes Single or multiple routes to trigger this view to render.
* @param {...any} elements Elements to render within the view. * @param {any|any[]} elements Elements to render within the view.
* @param {Boolean} strict If true all routes must match before this view becomes visible.
*/ */
constructor(routes, ...elements) { constructor(routes, elements, strict = false) {
super("router-view", elements); super("router-view", Array.isArray(elements) ? elements : [elements]);
if (!Array.isArray(routes)) { if (!Array.isArray(routes)) {
routes = [routes]; routes = [routes];
} }
this.property("routes", routes); this.property("routes", routes);
this.property("strict", strict);
} }
} }