如何使用 page.js 在位于站点内部页面上的 Polymer 应用程序中实例化路由

Question

我正在尝试运行网站内部页面上的 Polymer 应用程序，但在设置初始路径时遇到问题。该应用程序位于本地开发人员的 127.0.0.1:8080/hardware。

我的自定义元素如下所示：

<link rel="import" href="../../polymer/polymer.html" />
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html" />
<link rel="import" href="../../iron-pages/iron-pages.html" />
<link rel="import" href="../../iron-selector/iron-selector.html" />

<dom-module id="category-select">
  <style>
    :host {} iron-selector {
      @apply(--layout-horizontal);

@apply(--layout-wrap);

@apply(--layout-justified);

    }
    .fig-wrap {
      @apply(--layout-flex);

margin: 0 .8rem;
      min-width: 150px;
    }
    .fig-wrap figure img {
      margin: 0 auto;
      display: block;
    }
    figcaption {
      padding-top: 5px;
    }
    .fig-wrap figure figcaption h3 {
      font-size: 1rem;
      text-align: center;
    }
  </style>
  <template>

    <!--Allows selection by dom elements produced in template repeater-->

    <h1>Hey We are looking at the  <span>{{category}}</span>category</h1>
    <a data-route="home" href="/hardware">home</a>
    <iron-pages attr-for-selected="data-route" selected="{{route}}">

      <section data-route="home">
        <h1>Home route</h1>
        <a data-route="catz" href="/catz">CATZ</a>
        <iron-selector attr-for-selected="name" selected="{{category}}">
          <!-- Acts as a for each loop to repeat-->
          <template is="dom-repeat" items="{{categories}}">
            <div name$="{{item.name}}" class="fig-wrap">
              <!--<a href="{{item.link}}">-->
              <figure>
                <img src="{{item.img}}" alt="" />
                <figcaption>
                  <h3>{{item.name}}</h3>
                </figcaption>
              </figure>
              <!--</a>-->
            </div>
          </template>
        </iron-selector>
      </section>

      <section data-route="catz">
        <h1>Category route</h1>
      </section>
    </iron-pages>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'category-select',
    ready: function() {
      this.categories = [{
          name: 'Anchors',
          img: 'https://example.com/img/hardware/anchor.jpg',
          link: 'https://www.example.org/',
          products: [{
            name: 'Anchor',
            image: 'path/to/image.jpg',
            steel: '316 Stainless Steel',
            details: ['precision cut', 'polished from grade 316 stainless steel', 'suitable for both sailboats and powerboats', 'these anchors range in size from 25 lbs to 150 lbs'],
            options: [{
              size: '25 pounds',
              price: '3041.75',
              code: '32442'
            }, {
              size: '35 pounds',
              price: '4203.25',
              code: '4234'
            }, {
              size: '45 pounds',
              price: '5146.25',
              code: '34231'
            }, {
              size: '60 pounds',
              price: '6842.50',
              code: '1224'
            }, {
              size: '80 pounds',
              price: '8912.50',
              code: '1234'
            }, {
              size: '100 pounds',
              price: '11183.75',
              code: '1234'
            }, {
              size: '150 pounds',
              price: '14547.50',
              code: '1234'
            }]
          }, {
            name: 'Cast Iron Grapnel Folding Anchor',
            image: 'string',
            steel: 'Cast Iron Galvanized',
            details: ['products details', 'put them in a list', 'a pretty ul'],
            options: [{
              size: 'string',
              price: 'string',
              code: 'string'
            }]

          }, {
            name: '360° Anchor Swivel',
            image: 'string',
            steel: '17-4 PH Stainless Steel',
            details: ['products details', 'put them in a list', 'a pretty ul'],
            options: [{
              size: 'string',
              price: 'string',
              code: 'string'
            }]

          }, {
            name: 'Universal Anchor Swivel',
            image: 'string',
            steel: '17-4 PH Stainless Steel',
            details: ['products details', 'put them in a list', 'a pretty ul'],
            options: [{
              size: 'string',
              price: 'string',
              code: 'string'
            }]

          }, {
            name: 'Bow Chain Stopper',
            image: 'string',
            steel: '316 Stainless Steel',
            details: ['products details', 'put them in a list', 'a pretty ul'],
            options: [{
              size: 'string',
              price: 'string',
              code: 'string'
            }]

          }, {
            name: 'Anchor Chain & Spliced Rope Anchor Line',
            image: 'string',
            steel: '316L Stainless Steel & 3 Strand Twist',
            details: ['products details', 'put them in a list', 'a pretty ul'],
            options: [{
              size: 'string',
              price: 'string',
              code: 'string'
            }]
          }]
        }, {
          name: 'Chain',
          img: 'https://example.com/img/hardware/chain.jpg',
          link: 'https://www.example.com/'
        }

      ];
    },
    properties: {
      category: {
        computed: '_computeCategory(categories, name)'
      }
    },
    _computeCategory: function(categories, name) {
      return categories[name];
    }
  });
</script>

自定义元素包装在页面上的 <template is="dom-bind" id=app> 中。

我的 routing.html 是从 elements.html 调用的，如下所示：

<!--Elements from polymer-->
<link rel="import" href="../iron-selector/iron-selector.html"/>
<link rel="import" href="../iron-image/iron-image.html"/>
<link rel="import" href="../paper-button/paper-button.html"/>
<link rel="import" href="../paper-material/paper-material.html"/>
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"/>
<!--Custom Elements-->
    <!-- app-theme goes here-->
<link rel="import" href="../elements/category-select/category-select.html"/>

<!--Configure routes-->
<link rel="import" href="routing.html"/>

而 routing.html 看起来像这样：

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<script src="../page/page.js"></script>
<script>
    window.addEventListener('WebComponentsReady', function() {
        var app = document.querySelector('#app');

        // We use Page.js for routing. This is a Micro
        // client-side router inspired by the Express router
        // More info: https://visionmedia.github.io/page.js/
        page('/hardware', function () {
            app.route = 'home';
        });
        page('/catz', function () {
            app.route = 'catz';
        });
//
//        page('/users', function () {
//            app.route = 'users';
//        });
//
//        page('/users/:name', function (data) {
//            app.route = 'user-info';
//            app.params = data.params;
//        });
//        page('/categories', function () {
//            app.route = 'categories';
//        });
//
//        page('/categories/:name', function (data) {
//            app.route = 'category-info';
//            app.params = data.params;
//        });
//
//
//        page('/contact', function () {
//            app.route = 'contact';
//        });
//        page('/anchors', function () {
//            app.route = 'anchors';
//        });

        // add #! before urls
        page({
            hashbang: true
        });

    });
</script>

我在页面底部调用这个脚本：

(function(document) {
  'use strict';

  // Grab a reference to our auto-binding template
  // and give it some initial binding values
  var app = document.querySelector('#app');
  app.route = 'home';


})(document);

请注意，在添加 <iron-pages> 元素之前，我的 iron 选择器和 dom-repeat 模板起作用了。

我现在的问题是，当 <iron-pages attr-for-selected="data-route" selected="{{route}}"> 将其选择设置为 {{route}} 时，铁页将不会显示任何部分，但会显示 [=18= 的 url ].

当我将 iron-pages selected 属性手动设置为 selected="home" 时，主页视图显示并且 iron-selector 和 dom-repeat 这两个功能。然而，当我点击 link 到路线 catz 时，视图保持不变，而 url 发生变化。

console.log(app.route) 在开发工具 returns home 中的所有点。我已尽力模拟 Polymer 1.0 Starter Kit 的路由方法，但无法使其正常工作。

那么，我该如何开始设置回家的路线，然后允许它在用户交互时改变？

Answer 1

对于任何坚持这一点的人。 This Github issue 提示替换

page({
  hashbang: true
});

与

page.base('#!')

这似乎有助于解决初始加载问题，但随后您运行遇到单击 /hardware 等链接不再使用 hashbangs 的问题：\

如何使用 page.js 在位于站点内部页面上的 Polymer 应用程序中实例化路由

How to instantiate route in a Polymer app located on an internal page of a site using page.js

html

url-routing

web-component

polymer-1.0

page.js