polymer iron-pages pagejs not working
Question
I am implementing a simple routing app in polymer.js using iron-pages and page.js but this is not working.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script> <link rel="import" href="/bower_components/polymer/polymer.html"> <link rel="import" href="/bower_components/iron-pages/iron-pages.html"> <link rel="import" href="routes.html"> <title>Document</title> </head> <body> <div is="dom-bind" id="app"> <a data-route="home" href="/">home</a> <a data-route="users" href="/users">users</a> <a data-route="settings" href="/settings">settings</a> <iron-pages attr-for-selected="data-route" selected="{{route}}"> <section data-route="home">Home</section> <section data-route="users">Users</section> <section data-route="settings">Settings</section> </iron-pages> </div> </body> </html>
<script src="/bower_components/page/page.js"></script> <script> window.addEventListener('WebComponentsReady', function() { page('/', function() { app.route = 'home' console.log(app.route) // console.log('home') }) page('/users', function () { app.route = 'users' }) page('/settings', function () { app.route = 'settings' }) page({ hashbang: false }) }) </script>
Everything seems okay but this is not working.
1 answers
solution1
1 2017-10-26 07:29:04
At first, you should NOT use iron-pages in index.html.. It's much more easier and in future of your application also necessary to create new element where is located all the structure logic (routing, some popup elements etc...).
Dom-bind is only temporary solution. Your code seems ok and there should be no problem.
I assume you have your .htaccess configured as it is necessary to have it when using page.js
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.