Menu
My problem involves chaining app-route. Originally I thought this bug came from my application but I recreated it with a simple example. The issue arises from first visiting a url that matches the subroute and then changing the route so that it does not match the subroute.
I cannot use the Polymer cdn base tag because it will change the behavior of routing. If you copy and paste the code run bower init; bower install --save PolymerElements/app-route; python3 -m http.server; It should run the example code.
#/tree/maple causes routeData.collection = 'tree', subrouteData.uuid = 'maple'. This is correct and behaves as expected
#/tree causes routeData.collection = 'tree', subrouteData.uuid = 'maple'. notice nothing changes
Notice how even though the path changed to #/tree the subroute did not update. Is this a problem with my understanding of app-route?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="import" href="./bower_components/app-route/app-route.html">
<link rel="import" href="./bower_components/app-route/app-location.html">
<link rel="import" href="./bower_components/polymer/polymer.html">
</head>
<body>
<x-example></x-example>
</body>
</html>
<dom-module id="x-example">
<template>
<style>
</style>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route route="{{route}}" pattern="/:collection" data="{{routeData}}" tail="{{subroute}}"></app-route>
<app-route route="{{subroute}}" pattern="/:uuid" data="{{subrouteData}}"></app-route>
<h1>Path</h1>
<p>route: [[routeData.collection]]</p>
<p>subroute: [[subrouteData.uuid]]</p>
Visit: [In Order]
<a href="#/tree/maple">[2] Collection [TREE] UUID [MAPLE]</a> ->
<a href="#/tree">[1] Collection [TREE]</a>
</template>
<script>
Polymer({
is: "x-example",
});
</script>
</dom-module><app-route route="{{route}}" pattern="/:collection" data="{{listData}}" active="{{listActive}}"></app-route>
<app-route route="{{route}}" pattern="/:collection/:uuid" data="{{itemData}}" active="{{itemActive}}"></app-route>
It item would get preference.
562
Experimentation shows that when the route no longer matches, <app.route> changes subroute but doesn't clear subrouteData (perhaps this is a bug in that element). However, <app-route> always sets data when active=true (i.e., the route matches), so you would have to check the active flag before reading data.
For example, you could only show an element if active is true (and remove it from the DOM when false):
<template is="dom-if" if="[[subrouteActive]]" restamp>
<my-el uuid="[[subrouteData.uuid]]"></my-el>
</template>
Or the element could internally skip processing if active is false:
<my-el uuid="[[subrouteData.uuid]]" active="[[subrouteActive]]"></my-el>
// my-el script
_processUuid: function() {
if (!this.active) return;
// do something with this.uuid...
}
Or the element could observe active and reset things if false:
// my-el script
_onActiveChanged: function(active) {
if (!active) {
// reset...
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
