1

polymer initcliコマンドでポリマーアプリを起動した後。アプリケーションの基本的なセットアップを含むテンプレートを提供しました。また、ルーティングの設定も含まれます。

開くmy-app.htmlと、次のように表示されます。

<app-location route="{{route}}"></app-location>

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

<app-drawer-layout fullbleed>


<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
  <a name="view1" href="/view1">View One</a>
  <a name="view2" href="/view2">View Two</a>
  <a name="view3" href="/view3">View Three</a>
</iron-selector>


<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
  <my-view1 name="view1"></my-view1>
  <my-view2 name="view2"></my-view2>
  <my-view3 name="view3"></my-view3>
</iron-pages>

今のところすべて明らかです。しかし、次のようなこのページの JavaScript 実装があります。

Polymer({

  is: 'my-app',

  properties: {

    page: {
      type: String,
      reflectToAttribute: true,
      observer: '_pageChanged'
    },

  },

  observers: [
    '_routePageChanged(routeData.page)'
  ],

  _routePageChanged: function(page) {
    this.page = page || 'view1';
  },

  _pageChanged: function(page) {
    // load page import on demand.
    this.importHref(
      this.resolveUrl('my-' + page + '.html'), null, null, true);
  }

});

だからここに質問があります：

1 つは変数に、もう 1 つはグローバルに、2 つのオブザーバーが定義されているのはなぜですか?

1：

    page: {
      type: String,
      reflectToAttribute: true,
      observer: '_pageChanged'
    },

2：

  observers: [
    '_routePageChanged(routeData.page)'
  ],

pageつまり、同じ変数を 2 つの異なる場所で 監視しているように見えます。

4

1 に答える 1

1

これらは 2 つの異なる変数で、1 つは this.page で、もう 1 つは this.routeData.page です。

おそらく、これはより良い解決策になる可能性があります。

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

<app-drawer-layout fullbleed>

  <!-- Drawer content -->
  <app-drawer>
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[routeData.page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="view1" href="/view1">View One</a>
      <a name="view2" href="/view2">View Two</a>
      <a name="view3" href="/view3">View Three</a>
    </iron-selector>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout has-scrolling-region>

    <app-header condenses reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div title>My App</div>
      </app-toolbar>
    </app-header>

    <iron-pages role="main" selected="[[routeData.page]]" attr-for-selected="name">
      <my-view1 name="view1"></my-view1>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
    </iron-pages>

  </app-header-layout>

</app-drawer-layout>

iron-selector および iron-page の選択された属性に routeData.page を使用します。

Polymer({

  is: 'my-app',

  properties: {

    routeData: {
      type: Object,
      value: function () {
        // Default page.
        return { page: 'view1' };
      }
    },

  },

  observers: [
    '_routePageChanged(routeData.page)'
  ],

  _routePageChanged: function(page) {
    var currentPage = page || 'view1';

    this.importHref(
      this.resolveUrl('my-' + currentPage + '.html'), null, null, true);


    if (currentPage != this.routeData.page)
    {
        this.set('routeData.page', currentPage);
    }
  },

});

URL にはまだ問題があります /something_different_from_view[123]

_routePageChanged 内にブレークポイントを配置すると、空の URL で何が起こるかがわかります。

于 2016-07-04T11:56:39.717 に答える