полимерные железные страницы pagejs не работают

Я реализую простое приложение маршрутизации в полимере.js, используя iron-pages и page.js, но это не работает.

<!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>

Кажется, все в порядке, но это не работает.


person Yadagalla Jaswanth Kumar    schedule 25.10.2017    source источник
comment
Что именно не работает? Каков ваш ожидаемый результат?   -  person sina    schedule 25.10.2017
comment
Ссылки отображаются, но содержимое «железных страниц» не отображается. Я думаю, что проблема связана с запросом данных, т. Е. {{router}}   -  person Yadagalla Jaswanth Kumar    schedule 25.10.2017
comment
Пожалуйста, прочитайте При каких обстоятельствах я могу добавить «срочно» или другие подобные фразы к моему вопросу, чтобы получить более быстрые ответы? - Подводя итог, можно сказать, что это не идеальный способ обращения к волонтерам и, вероятно, контрпродуктивно для получения ответов. Пожалуйста, воздержитесь от добавления этого к своим вопросам.   -  person halfer    schedule 26.10.2017


Ответы (1)


Во-первых, вы НЕ должны использовать железные страницы в index.html. Это намного проще, и в будущем вашего приложения также необходимо создать новый элемент, в котором находится вся логика структуры (маршрутизация, некоторые всплывающие элементы и т. д.) .

Dom-bind это только временное решение. Ваш код выглядит нормально, и проблем быть не должно.

Я предполагаю, что у вас настроен .htaccess, так как это необходимо при использовании page.js

person Kuba Šimonovský    schedule 26.10.2017