我正在尝试在网站的内部页面上运行 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>元素之前，我的铁选择器和 dom-repeat 模板起作用。
我现在的问题是，当<iron-pages attr-for-selected="data-route" selected="{{route}}">其选择设置为 {{route}} 时，iron-pages 将不会显示任何部分，但会显示hardware/#!/hardware.
当我手动将 iron-pages selected 属性设置为主selected="home"视图显示时，iron-selector 和 dom-repeat 这两个功能。然而，当我单击指向路线 catz 的链接时，当 url 更改时，视图保持不变。
console.log(app.route)在开发工具中返回home所有点。我已尽力模拟 Polymer 1.0 Starter Kit 的路由方法，但无法使其正常工作。
那么，我如何开始设置回家的路线，然后允许它在用户交互时改变？