_RoutePageChagned polymer works twice

Question

When I change the page by reference or through JS this.set ('route.path', 'packages'); the _routePageChagned method works twice. This also happens when the page loads for the first time.

This also happens in the template set of standard polymer starter templates from CLI.

Am I missing something? How can this happen?

<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/app-route/app-location.html"> <link rel="import" href="../bower_components/app-route/app-route.html"> <link rel="import" href="../bower_components/iron-pages/iron-pages.html"> <link rel="import" href="my-icons.html"> <link rel="import" href="pages/my-loading.html"> <dom-module id="my-app"> <template> <style> </style> <app-location route="{{route}}"></app-location> <app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"></app-route> <iron-pages id="pages" selected="[[page]]" attr-for-selected="name" fallback-selection="view404" selected-attribute="visible" role="main"> <my-loading name="loading"></my-loading> <my-login name="login"></my-login> <my-view404 name="view404"></my-view404> <my-view403 name="view403"></my-view403> <my-packages name="packages"></my-packages> </iron-pages> </template> <script> Polymer({ is: 'my-app', properties: { /** * The current page. */ page: { type: String, reflectToAttribute: true }, }, observers: [ '_routePageChanged(routeData.page)' ], _routePageChanged: function(page) { console.log(page); var resolvedPageUrl = this.resolveUrl('pages/my-' + page + '.html'); this.importHref(resolvedPageUrl, function() { this.page = page; }.bind(this), undefined, false); } }); </script> </dom-module> 

Answer 1

This works as a hack fix, I still don’t know why this is necessary.

 _pageChange: function(page) { this.debounce(function() { // Load page import on demand. Show 404 page if fails var resolvedPageUrl = this.resolveUrl('pages/my-' + page + '.html'); this.importHref(resolvedPageUrl, this._pageLoaded.bind(this, page), // loaded callback this._pageChange.bind(this, 'view404'), true); }.bind(this), 100); }