Полимер, как использовать приложение-местоположение?

Question

Я пытаюсь использовать приложение-местоположение, чтобы динамически загружать статьи со ссылками на другие статьи и иметь возможность использовать навигацию браузера, чтобы идти туда и обратно между ними, например, на обычном веб-сайте. Мое понимание местоположения приложения заключается в том, что он захватывает URL-адрес отправки в браузер из ссылки и обновляет его значение маршрута, что позволяет выполнять маршрутизацию на стороне клиента. Это мой первый тест «статьи», который загружает отлично:

<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 только имеет р тег с некоторым текстом.

Вот как это выглядит на начальной загрузки. Эта ссылка в нижней части основного раздела - это ссылка, о которой я говорю. Мое намерение состоит в том, что если я нажму на эту ссылку, это изменит URL-адрес, тогда приложение-местоположение захватит это и изменит его свойство маршрута, тогда мой наблюдатель сможет очистить старую «статью», загрузить новую и вставить ее в контент площадь. Итак, поскольку загружена «новая страница», я должен нажать кнопку «Назад», чтобы вернуться на предыдущую страницу.

Однако, когда я нажимаю ссылку, он просто загружает файл в виде необработанного текстового файла и отображает его: <p>A NEW PAGE GOT LOADED WOOOOOO</p>, включая теги p. Очевидно, я кое-что понял, что, вероятно, так как я все еще очень новичок в Polymer, и это должно было стать учебным проектом. Может ли кто-нибудь найти то, что я сделал неправильно здесь, или дать мне указания на то, что я должен делать по-другому, чтобы моя идея работала?

Вот мой полный код элемента:

<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

на основе кода каталога

App

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> 

мой-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> 

---

Он начинается с app-location захвата URL-адрес, обновить route, и это будет вызывать app-route, app-route попробовать, чтобы соответствовать, что URL-адрес с рисунком и установить результат routeData, url на iron-ajax будет меняться соответствующим образом.

При нажатии на a href, URL изменится без перезагрузки, потому что, когда iron-location активным он будет перехватывать клики по ссылкам на сайте (see in links section и app-location использования iron-location), поэтому вам не нужно ничего с a href. После этого будет запущен routeChanged и сгенерирует запрос.

Кроме, я видел, как вы используете

this.route = 'some path'; 

Я думаю, что это должно быть

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

Я надеюсь, что это поможет.