Polymer _routePageChạm chạy hai lần

Question

Khi tôi thay đổi trang qua liên kết hoặc qua JS this.set ('route.path', 'packages'); phương thức _routePageChagned đang chạy hai lần. Nó cũng xảy ra khi trang tải lần đầu tiên.

Điều này cũng xảy ra trong mẫu bộ khởi động polymer mặc định được tạo từ CLI.

Tôi đang thiếu gì đó? Làm thế nào điều này có thể xảy ra?

<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

Điều này hoạt động như một bản sửa lỗi, vẫn không biết tại sao nó cần thiết.

_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); 
}