2015-07-13 17 views
5

Ich möchte eine einzelne Seite Anwendung machen. Wie kann ich die URL-Parameter, die page.js verwenden, in einem Polymerelement abrufen, wenn ich zu Pfad wie localhost/person-info/101 gehe?Polymer, wie URL URLs in page.js in Polymerelement erhalten?

Ich habe diese params zu verwenden, um Daten in dem person-info Elemente zu wählen oder ändern neon-animated-page vor der Verwendung Seite

Inhalt von app.js zu ändern: 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> 

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

Und mein Polymer Elemente

Antwort

2

Variable app ist global, wenn Sie also eine Daten anbindenvon Ihrer Route, als Sie überall mit app.params zugreifen können. Oder einfach nur Ihr Element zugreifen und legen Sie die Eigenschaften auf Ihrem Element wie unten

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

Von Ihrer Person-Info-Element Sie mithilfe this.user zugreifen können, aber ich denke, dass Sie die Eigenschaft user auf Elementeigenschaften festlegen müssen.

+0

Es funktioniert !!! Vielen Dank. aber ich möchte nur wissen, das ist ein richtiger Weg, um Daten dynamisch zu ändern, richtig? oder es hat den anderen Weg besser als das –

+0

Für mich ja, es ist ein einfacher Weg für dynamische Daten. Aber dann können Sie an das Datenmodell binden. Wenn sich das Datenmodell ändert, aktualisiert es automatisch auch Ihren Inhalt. – tyohan

+0

Entschuldigung, was ist ein Datenmodell? kannst du mir ein Beispiel geben, Danke. –

Verwandte Themen