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.

The Problem

Click link to #/tree/maple causes routeData.collection = 'tree', subrouteData.uuid = 'maple'. This is correct and behaves as expected
Next click link to #/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>

Possible Solution but not as clean

<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.

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...
  }
}

The Problem

Possible Solution but not as clean

Recommended topics

Hot tags