Polymer Beobachter in App-Schublade-Vorlage. Understanding Routing

Question

Nach dem Start Polymer App mit polymer init CLI Befehl. Sie haben eine Vorlage mit einigen grundlegenden Einstellungen einer Anwendung angegeben. Es enthält auch Routing-Setup.

Wenn Sie öffnen my-app.html können Sie sehen folgendes:

<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> 

Alles für jetzt klar. Aber dann haben wir JavaScript-Implementierung dieser Seite wie folgt:

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

}); 

Also hier ist eine Frage:

Warum haben wir zwei Beobachter definiert, eine auf variable und anderen global?

ein:

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

zwei:

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

So ist es sieht aus wie wir die gleiche Variable page aber an zwei verschiedenen Orten beobachten.

Answer 1

Sie sind zwei verschiedene Variablen, eine this.page und eine this.routeData.page.

Vielleicht könnte dies eine bessere Lösung:

<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> 

routeData.page für ausgewähltes Attribut Verwendung von Eisen-Selektor und Eisen-Seiten.

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

}); 

Es ist immer noch ein Problem mit URLs/something_different_from_view [123]

Wenn Sie einen Haltepunkt in _routePageChanged setzen, werden Sie sehen, was mit leerer URL geschieht.