Polimero, come ottenere i parametri url in page.js nell'elemento polimerico?

Question

Desidero creare un'applicazione a pagina singola. Quando vado su un percorso come localhost/person-info/101, come posso ottenere i parametri URL usando page.js in un elemento Polymer?

devo usare questi params per selezionare o modificare i dati nell'elemento person-info prima di utilizzare neon-animated-page alla pagina cambiare

Contenuto del 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'; 
    } 
}); 

E il mio elemento 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

La variabile app è globale, quindi se si associa un dato a app.params dal tuo percorso di quanto tu possa accedervi ovunque utilizzando app.params. O semplicemente accedere al vostro elemento e impostare le proprietà sul vostro elemento come qui di seguito

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

Dal vostro elemento persona-info è possibile accedere utilizzando this.user ma penso che è necessario impostare la proprietà user sulle proprietà degli elementi.