Polymer, jak zdobyć paramy w page.js na element polimerowy?

Question

Chcę utworzyć aplikację pojedynczej strony. Kiedy przechodzę do ścieżki takiej jak localhost/person-info/101, w jaki sposób mogę uzyskać parametry adresu URL używając pliku page.js w elemencie Polymer?

muszę używać tych params, aby wybrać lub zmienić dane w elemencie person-info przed użyciem neon-animated-page zmienić strona

Zawartość app.js:

window.addEventListener('WebComponentsReady', function() { 
    var app = document.querySelector('#app'); 
    page('/', home); 
    page('/person-info/:user', showPersonInfo); 

    page({ 
     hashbang: true 
    }); 

    function home() { 
     app.route = 'index'; 

     console.log("app route" + app.route); 
     console.log("home"); 
    } 

    function showPersonInfo(data) { 
     console.log(data); 
     console.log(data.params.user); 

     app.params = data.params; 

     app.route = 'person-info'; 
    } 
}); 

A mój żywioł Polymer person-info.html

<link rel="import" href="bower_components/iron-list/iron-list.html"> 
<link rel="import" href="bower_components/polymer/polymer.html"> 
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"> 
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> 

<script type="text/javascript" src="bower_components/jquery-2.1.4.min/index.js"></script> 
<script src="js/app.js"></script> 

<dom-module id="person-info"> 
    <style> 
     :host { 
      display: block; 
      font-family: sans-serif; 
      @apply(--layout-fit); 
      @apply(--layout-vertical); 
     } 

     .toolbar { 
      background: #3f78e3; 
     } 

     a { 
      color:#FFF; 
     } 
    </style> 
    <template id="person-info"> 
     <paper-toolbar class="toolbar"> 
      <a href="/"> 
       <paper-icon-button icon="icons:arrow-back"></paper-icon-button> 
      </a> 

      <div>test</div> 
      <div>test</div> 
     </paper-toolbar> 
     <content></content> 
    </template> 
    <script> 
     Polymer({ 
      is: 'person-info', 
      ready: function() { 
       console.log("person-info page"); 
       this.testdd = "adisak"; 
       console.log("user ---->"+this.params); 
       console.log(this); 
      }, 
      properties: { 
       dataindex: String 
      } 
     }); 
    </script> 
</dom-module> 

Answer 1

Zmienna app jest globalna, więc jeśli wiążesz dane z app.params z Twojej trasy, niż możesz uzyskać do niego dostęp wszędzie za pomocą app.params. Albo po prostu uzyskać dostęp do elementu i ustawić właściwości na elemencie jak poniżej

function showPersonInfo(data){ 
    var personInfo=document.querySelector('person-info'); 
    personInfo.user=data.params; 
    app.route = 'person-info'; 
} 

ze swojego elementu człowiek-info można uzyskać dostęp za pomocą this.user ale myślę, że trzeba ustawić właściwość user na właściwości elementu.