Question

当我通过链接或通过JS this.set更改页面时（＆＃39; route.path＆＃39;，＆＃39; packages＆＃39;）; _routePageChagned方法正在运行两次。它也会在第一次加载页面时发生。

这也发生在CLI的默认聚合物入门套件模板构建中。

我错过了什么？怎么会发生这种情况？

<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

这可以作为黑客修复，但仍然不知道为什么需要它。

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

聚合物_routePageChagned运行两次

1 个答案: