PolymerElements / app-route

A modular client-side router
https://www.polymer-project.org/1.0/articles/routing.html
146 stars 66 forks source link

Active is true when it _really_ should not be (super-simple use case) #158

Open mercmobily opened 7 years ago

mercmobily commented 7 years ago

This is a simple use-case for app-route and app-location. To replicate it, just polymer init an app called pp and copy over pp-app.html with this:

<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/app-route/app-route.html">
<link rel="import" href="../../bower_components/app-route/app-location.html">

<dom-module id="pp-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <app-location route="{{route}}"></app-location>

    <app-route route="{{route}}" pattern="/:page" data="{{routeDataPage}}" tail="{{tailPage}}" active="{{activePage}}"></app-route>

    <app-route route="{{tailPage}}" pattern="/:city" data="{{routeDataCity}}" tail="{{tailCity}}" active="{{activeCity}}"></app-route>

    <app-route route="{{tailCity}}" pattern="/:category" data="{{routeDataCategory}}" active="{{activeCategory}}"></app-route>

    <a href="/">Root</a>
    <a href="/p">Page</a>
    <a href="/p/perth">Perth</a>
    <a href="/p/perth/cat1">Cat1</a>

    <p>route: {{_o(route)}}</p>

    <p>activePage and routeDataPage: {{activePage}} {{_o(routeDataPage)}}</p>
    <p>activeCity and routeDataCity: {{activeCity}} {{_o(routeDataCity)}}</p>
    <p>activeCategory and routeDataCategory: {{activeCategory}} {{_o(routeDataCategory)}}</p>

  </template>

  <script>
    Polymer({

      _o: function(o){
        return JSON.stringify( o );
      },

      is: 'pp-app',

    });
  </script>

</dom-module>

And also bower install PolymerElements/app-route.

If you navigate the links in order, and then back in reverse order, everything works file:

Root -> Page -> Perth -> Cat1 and then backwards Perth -> Page -> Root

HOWEVER, if you go to Root -> Page -> Perth -> Cat1, and then straight to page, you will see:

activeCategory and routeDataCategory: true {"category":"cat1"}

This tells me that the category route is, according to app-route, still active. However, it really really isn't. I realise that there are some optimisation issues that will prevent routes from replicating. However, active really should reflect the truth. I looked through the code and couldn't work out why this is happening.

TimvdLippe commented 7 years ago

This should be fixed in #125

OvermindDL1 commented 7 years ago

Same issue, #125 is not yet merged so this issue still exists.

e111077 commented 6 years ago

See explanation on #176.

Keeping this issue open for visibility