Polymer, how to get url params in page.js into polymer element? -
i want make single page application. when go path localhost/person-info/101
, how can url params using page.js polymer element?
i have use these params select or change data in person-info
element before using neon-animated-page
change page
contents of 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'; } });
and polymer element 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; } { 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>
variable app
global, if bind data app.params
route can access everywhere using app.params. or access element , set properties on element below
function showpersoninfo(data){ var personinfo=document.queryselector('person-info'); personinfo.user=data.params; app.route = 'person-info'; }
from person-info element can access using this.user
think need set property user
on element properties.
Comments
Post a Comment