Observer set on `routeData` keeps firing in the background after navigating to a different page/element.

[vedtam]

Hi,

Is it a normal behaviour for an observer set on routeData to fire after navigating away from an element? I use the stock PSK, with iron-pages. I have created two pages: A, B - each having app-location and an observer set for routeData so when this changes, data gets fetched from the server.

The issue is, page A starts making requests when I navigate to page B. Should I somehow unregister the observers manually?

Expected outcome

Observer set in page A on routeData should be removed once the user navigates to page B.

page A:

<app-location route="{{route}}"></app-location>
<app-route
    route="{{route}}"
    pattern="/:page"
    data="{{routeData}}"
    tail="{{subroute}}">
</app-route>
<app-route
    route="{{subroute}}"
    pattern="/:id"
    data="{{tail}}">
</app-route>


...

static get observers() {
  return [
    'pageChanged(routeData.page)',
  ];
}


pageChanged(page){
  console.log('page A fired. ' + this.tail.id);
  this._fetchProduct();
}

page B:

<app-location route="{{route}}"></app-location>
<app-route
    route="{{route}}"
    pattern="/:page"
    data="{{routeData}}"
    tail="{{subroute}}">
</app-route>
<app-route
    route="{{subroute}}"
    pattern="/:id"
    data="{{tail}}">
</app-route>

...

static get observers() {
  return [
    'pageChanged(routeData.page)',
  ];
}


pageChanged(page){
  console.log('page B fired. ' + this.tail.id);
  this._fetchProfile();
}

[CaptainCodeman]

Yes, once you load a view it stays loaded so if you've set an observer it will keep updating. I tried to explain what's going on and give some options to make the non-active views inert in this blog post. There are a few different approaches you can use.

[vedtam]

@CaptainCodeman thanks for the info, I was using a solution like nr. 2 in your blog post, but nr. 1 seems attractive as well.

Thanks!

[dannywolfmx]

You can also use dom-if and visible (iron-pages) to activate or deactivate the app-route. In this way the app-route of the children pages will not do anything if they are not being visible.