Polymer, wie wird App-Location verwendet?

Question

Ich versuche App-Location zu verwenden, um Artikel dynamisch mit Links zu anderen Artikeln zu laden und in der Browsernavigation zwischen ihnen hin- und herzuwechseln, wie auf einer normalen Website. Mein Verständnis von App-Location ist, dass es die URL, die über einen Link an den Browser gesendet wird, erfasst und seinen Routenwert aktualisiert, sodass Sie clientseitig routen können. Dies ist mein erster Test "Artikel", die fein lädt:

<h1>Title header</h1> 

<p>Here's a bunch of words and this one's <b>special</b></p> 

<a id="content-link" href="/articles/test2.txt" on-tap="handleTap">link to another article</a> 

test2.txt hat nur einen p-Tag mit etwas Text in ihm.

Das ist, wie es bei der ersten Belastung aussieht. Dieser Link unten im Hauptteil ist der Link, über den ich spreche. Meine Absicht ist, dass wenn ich auf diesen Link klicke, wird die URL geändert, dann greift app-location und ändert seine route-Eigenschaft, dann kann mein Beobachter den alten "Artikel" löschen, den neuen laden und in den Inhalt einfügen Bereich. Also, weil eine "neue Seite" geladen wurde, sollte ich in der Lage sein, den Browser zurück zu drücken, um zur obigen Seite zurückzukehren.

Wenn ich jedoch auf den Link klicke, wird die Datei einfach als Rohtextdatei geladen und angezeigt: <p>A NEW PAGE GOT LOADED WOOOOOO</p>, p-Tags enthalten. Offensichtlich habe ich etwas falsch verstanden, was wahrscheinlich ist, da ich Polymer noch sehr neu bin und dies ein Lernprojekt sein sollte. Kann jemand herausfinden, was ich hier falsch gemacht habe, oder mir Hinweise geben, was ich anders machen sollte, damit meine Idee funktioniert?

Hier ist mein voller Element Code:

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> 
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html"> 
<link rel="import" href="../../bower_components/app-route/app-*"> 

<dom-module id="AR_Website-app"> 
    <template> 
    <style> 
     /*header*/ 
     header { 
     display: block; 
     padding: 20px 0; 
     padding-left: 30px; 
     background-color: rgb(220, 60, 50); 
     } 

     p { 
     margin: 0; 
     font-family: Verdana, Geneva, sans-serif; 
     font-size: 30px; 
     animation: title-fadein 1s; 
     animation-fill-mode: forwards; 
     } 

     @keyframes title-fadein { 
     from { 
      text-shadow: none; 
      opacity:0; 
     } 

     to{ 
      text-shadow: 0 0 2px black; 
      opacity:1; 
     } 
     } 

     /*content*/ 
     table { 
     border-collapse: collapse; 
     width: 100%; 
     min-height: calc(100vw - 110px); 
     } 

     table td { 
     vertical-align: top; 
     padding: 0; 
     } 

     table td:nth-child(1) { 
     background-color: blue; 
     } 

     table td:nth-child(2) { 
     background-color: green; 
     padding: 10px; 
     } 

     table td:nth-child(3) { 
     background-color: red; 
     } 
    </style> 

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

    <iron-ajax url="{{route}}" handle-as="text" on-response="handleRequest"></iron-ajax> 

    <header><p>The Title</p></header> 
    <table> 
     <tr> 
     <td width="10%"><div id="left-banner"> 

     </div></td> 
     <td width="80%"> 
      <div id="content"> 

      </div> 
     </td> 
     <td width="10%"><div id="right-banner"> 

     </div></td> 
     </tr> 
    </table> 
    </template> 

    <script> 

    Polymer({ 

     is: 'AR_Website-app', 


     observers: [ 
     '_routeChanged(route)' 
     ], 

     attached: function(){ 
     this.route = "/articles/test.txt" 
     //console.log("Page loaded, sending request for route "+this.route) 
     this.$$('iron-ajax').generateRequest(); 
     }, 

     _routeChanged: function(route) { 
     console.log("new route "+route+", sending request") 
     this.$$('iron-ajax').generateRequest(); 
     }, 

     handleRequest: function(event) { 
     //Remove existing html snippet 
     console.log("handling request") 
     while (this.$$('#content *') != null){ 
      this.$$('#content').removeChild(this.$$('#content *')) 
     } 
     //Create new html code from received text 
     console.log(event.detail.response) 
     var div = document.createElement('div') 
     div.innerHTML = event.detail.response 
     for (x = 0; x < div.childNodes.length; x++){ 
      var content = div.childNodes[x] 
      this.$$('#content').appendChild(content) 
     } 
     //Add event handlers for links 
     //this.listen(this.$$('#content-link'), 'tap', 'handleTap') 
     }, 

     handleTap: function(event) { 
     //Cancel page load from link 
     //event.preventDefault(); 
     //Request new html snippet 
     console.log("Loading "+this.$$('#content-link').href) 
     //this.set('route', this.$$('#content-link').href) 
     this.route = this.$$('#content-link').href 
     //this.$$('iron-ajax').generateRequest(); 
     } 
    }); 
    </script> 
</dom-module> 

Answer 1

Basierend auf Ihren Code

App-Verzeichnis

app 
- bower_components 
- articles 
-- a.txt 
-- b.txt 
- index.html 
- my-app.html 

index.html

<!doctype html> 
<html> 
    <head> 

    <link rel='import' href='my-app.html'> 

    </head> 
    <body> 

    <my-app></my-app> 

    </body> 
</html> 

my-app.html

<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-ajax/iron-ajax.html'> 

<dom-module id='my-app'> 
    <template> 

    <style> 
     header{display:block;padding:20px 0 20px 30px;background-color:#dc3c32}p{margin:0;font-family:Verdana,Geneva,sans-serif;font-size:30px;animation:title-fadein 1s;animation-fill-mode:forwards}@keyframes title-fadein{from{text-shadow:none;opacity:0}to{text-shadow:0 0 2px #000;opacity:1}}table{border-collapse:collapse;width:100%;min-height:calc(100vw - 110px)}table td{vertical-align:top;padding:0}table td:nth-child(1){background-color:#00f}table td:nth-child(2){background-color:green;padding:10px}table td:nth-child(3){background-color:red} 
    </style> 

    <app-location route='{{route}}'></app-location> 
    <app-route 
     route='{{route}}' 
     pattern='/articles/:article' 
     data='{{routeData}}'> 
    </app-route> 
    <iron-ajax url='/articles/[[routeData.article]]' handle-as='text' on-response='handleRequest'></iron-ajax> 

    <header> 
     <p>The Title</p> 
    </header> 
    <table> 
     <tr> 
     <td width='10%'><div id='left-banner'></div></td> 
     <td width='80%'> 
      <div id='content'> 
      <div>[[article]]</div> 
      <a href='/articles/a.txt'>a article</a> 
      <a href='/articles/b.txt'>b article</a> 
      </div> 
     </td> 
     <td width='10%'><div id='right-banner'></div></td> 
     </tr> 
    </table> 

    </template> 
    <script> 

    Polymer({ 
     is: 'my-app', 

     observers: [ 
     'routeChanged(route)' 
     ], 

     routeChanged: function (route) { 
     if (this.$$('app-route').active) 
      this.$$('iron-ajax').generateRequest(); 
     }, 

     handleRequest: function (event) { 
     this.article = event.detail.response; 
     } 
    }); 

    </script> 
</dom-module> 

---

Aus app-location greifen, starten Sie die URL route aktualisieren, und das wird app-route, app-route Versuch auslösen, die URL mit Mustern und setzte Ergebnis routeData, url auf iron-ajax wird entsprechend anzupassen ändern.

Wenn Sie auf a href wird url ohne Nachladen ändern, denn wenn iron-location aktiv es Klicks auf Links innerhalb Ihrer Website abfängt (see in links section und app-location Verwendung iron-location), so brauchen Sie nicht mit a href zu nichts. Danach wird routeChanged ausgelöst und die Anfrage generiert.

Neben, ich sah dich verwenden

this.route = 'some path'; 

ich denke, es

this.set('route.path', 'some path'); 

Ich hoffe, sollte dies helfen wird.