Как создать маршрут в приложении Polymer, расположенном на внутренней странице сайта, с помощью page.js
Я пытаюсь запустить приложение 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"/>И Rouing.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}}, железные страницы не будут отображать ни один из разделов, а отображают URL hardware/#!/hardware,
Когда я устанавливаю выбранный атрибут железных страниц вручную selected="home" На экране отобразятся домашний вид, железо-селектор и дом-повтор. Тем не менее, когда я нажимаю на ссылку на маршрут Catz, вид остается неизменным, в то время как URL меняется.
console.log(app.route) в инструментах разработчика возвращается home по всем пунктам. Я приложил все усилия, чтобы эмулировать методы маршрутизации в Polymer 1.0 Starter Kit, но не могу заставить его работать.
Итак, как мне сначала установить маршрут к дому, но затем изменить его при взаимодействии с пользователем?
1 ответ
Для всех, кто застрял на этом. Эта проблема Github намекает на замену
page({
hashbang: true
});
с
page.base('#!')
Кажется, это помогает решить проблему с начальной загрузкой, но затем вы сталкиваетесь с проблемами, при которых щелкают ссылки: /hardware больше не пользуйтесь hashbangs:\