PolymerElements / app-route

A modular client-side router

Home Page:https://www.polymer-project.org/1.0/articles/routing.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Property "data" doesn't change when the route isn't active

alber70g opened this issue · comments

Description

app-route.data isn't changed when the route is not active according to the pattern. This results in false positives when only looking at the app-route.data.

Example

    <!-- /523 -->
    <app-route route="{{route}}"
      pattern="/:id"
      data="{{productData}}"
      active="{{idRouteActive}}">
    </app-route>

    <!-- /523/open -->
    <app-route route="{{route}}"
      pattern="/:id/:action"
      data="{{actionData}}"
      active="{{idActionActive}}">
    </app-route>

Let's say we have this route, we can add an observer _observeRoutes(productData, actionData). Then check for both of the id's, where we assume that only one can be filled.

This assumption is false: the not-active route will not have an updated app-route.data, resulting in the false positive of app-route.data.id.

Live Demo

Steps to reproduce

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10

@alber70g We just published a PR that fixes this over at #210.

Thank you, this is great!

This is a major problem when using a subroute that expects say /category as the main page, and /category/item as the subpaths that it manages, as it completely ignores /category without this change.

PS: #210 fixes this perfectly.

copying my comment from #210:

This was a feature intentionally reverted while in beta because of computational cost. It would propagate down the entire routing subtree upon each change.

Seeing as there has been repeated requests for this feature, I'd be willing to merge a non-breaking change that hides this feature behind a flag (name I have made up below is crude and I welcome suggestions), so usage would be

<app-route clear-data-on-reset route="{{route}}" data="{{firstDataClearsOnReset}}" tail="{{tail}}">
</app-route>
<app-route clear-data-on-reset route="{{tail}}" data="{{secondDataClearsOnReset}}">
</app-route>