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.
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-bindis only temporary solution. Your code seems ok and there should be no problem.I assume you have your
.htaccessconfigured as it is necessary to have it when usingpage.js