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.

Links are getting rendered but the content inside is not rendering. I think the problem is with data-biding i.e., {{router}} — Yadagalla Jaswanth Kumar, Oct 25 '17 at 12:50
Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer, Oct 25 '17 at 21:11

score 1 · Answer 1 · answered Oct 26 '17 at 07:29

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

polymer iron-pages pagejs not working

1 Answers1