2015-07-13 26 views
5

Tek bir sayfa uygulaması yapmak istiyorum. localhost/person-info/101 gibi yola gittiğimde, sayfa paralelliğini URL.js'yi bir Polymer öğesine nasıl alabilirim?Polimer, sayfa.js'deki URL parametrelerini polimer elemanına nasıl alırsınız?

ben seçmek veya sayfayı app.js ait

İçeriği değiştirmek için neon-animated-page kullanmadan önce person-info eleman verileri değiştirmek için bu params kullanmak zorunda:

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

Ve Polimer eleman 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> 

cevap

2

Değişken app globaldir, bu nedenleno'lu veriyi bağlarsanız Rotanızdan, her yere app.params kullanarak erişebilirsiniz. Ya da sadece senin elemana ulaşmak ve set özelliklerini sizin elemanı üzerinde kişi-info elemanı itibaren

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

Eğer this.user kullanarak erişebilir aşağıda gibi ama ben seni eleman özelliklerine özelliği user ayarlamak gerek.

+0

Çalışıyor! Teşekkür ederim. ama sadece bilmek istiyorum, bu verileri dinamik olarak doğru bir şekilde değiştirmek için doğru bir yoldur? ya da bu –

+0

'dan daha iyi başka bir şekilde Benim için evet, dinamik veriler için basit bir yoldur. Ancak, veri modeline bağlayabilirsiniz, bu nedenle veri modeli değişirse, içeriğiniz de otomatik olarak güncellenir. – tyohan

+0

Üzgünüm efendim, veri modeli nedir? bana bir örnek verebilir misin, teşekkür ederim. –