0
私はPolymerに非常に新しく、いくつかの実践的な経験を得るためにいくつかのことを読み、試しています。ポリマー配線：内側の経路が反映されない
私はビデオ、音楽、写真のようなメディアを配信するNodeJS（ミドルウェアとしてExpressJS）駆動型アプリのビュープラットフォームとしてPolymerを採用することに決めました。ちなみに、私はNodeJSとExpressも新しくなっていますが、私はそれが私のPolymerの意見に応えるのに十分に働いています。
私は内部のルートを反映することにいくつか問題があります。アドレスバーはURLを反映しますが、私のビューはそれに応じて変更されません。私は何か基本的なものを欠いているようだ。
私は、次の流れを持っている：アプリは私のウェブサーバで「nodepolymer」ディレクトリ（つまりそれがルートアプリではありません） 例のURLから提供され
- ：
mywebroot/nodepolymer - ホームページはいくつかを持っています選択された画像/利用可能なメディアのテキスト。動画/音楽と写真へのリンクでは、選択したタイプ/カテゴリの利用可能なすべてのメディアのリストを表示する個々のリンク先ページに移動します。 例URL：特定のメディアファイルに
mywebroot/nodepolymer/view-videosまたはmywebroot/nodepolymer/view-musicなどなど - クリックすると、独自の個々のページに 例URLを開きます：
mywebroot/nodepolymer/view-music/view-media（URLでいないメディア識別子が、「ビュー・メディアは」カテゴリ間で共通となります） - さらに1つ上の階層に進むこともできます（ネスティングは既に深いと思いますが、必要があるかもしれません）。そして、機能のみのビューとして機能するページ/ビューがあります。例のURL：
mywebroot/view-pictures/view-media/create-memeまたはmywebroot/view-videos/view-media/extract-audioなどなど
ルートルートと最初のレベルはmywebroot/view-videos/またはmywebroot/view-music/のようなURLすなわち正常に動作します。 mywebroot/view-videos/view-mediaのような内部レベルはアドレスバーに反映されますが、ビューは切り替わりません。 mywebroot/view-videos/ビューが表示されます。
基本的なルーティングの作業を行うための関連ファイル/コードを以下に示します。私はポリマーの最新バージョンを使用しており、ルートはapp-route（app-route＃^ 0.9.2）で処理されています。何か指摘してくれてありがとう。
私のindex.htmlファイル：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>My App</title>
<meta name="description" content="My App description">
<link rel="icon" href="/nodepolymer/images/favicon.ico">
<link rel="manifest" href="/nodepolymer/manifest.json">
<script>
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
(function() {
'use strict';
var onload = function() {
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {
bubbles: true
})
);
}
};
var webComponentsSupported = (
'registerElement' in document &&
'import' in document.createElement('link') &&
'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/nodepolymer/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/nodepolymer/service-worker.js');
});
}
</script>
<link rel="import" href="/nodepolymer/src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body>
<my-app></my-app>
</body>
</html>
"私のアプリ" 要素：
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="view-videos.html">
<link rel="import" href="view-music.html">
<link rel="import" href="view-home.html">
<link rel="import" href="my-icons.html">
<dom-module id="my-app">
<template id="app">
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/nodepolymer/:page" data="{{routeData}}" tail="{{tail}}"></app-route>
<iron-pages selected="[[routeData.page]]" attr-for-selected="data-route" fallback-selection="404">
<section data-route="">
Home {{routeData.page}}, [[routeData.page]] <!-- To view values on screen, no values displayed on homepage-->
</br>
<a href="/nodepolymer/view-videos">View Videos.</a> | <a href="/nodepolymer/view-music">View Music.</a>
<view-home data-route="view-home" route=""></view-home>
</section>
<view-videos data-route="view-videos" route="{{tail}}"></view-videos>
<view-music data-route="view-music" route="{{tail}}"></view-music>
<section data-route="404">
Oops you hit a 404.
<a href="/nodepolymer">Head back home.</a>
</section>
</iron-pages>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routeChanged(route.*)',
'_viewChanged(routeData.view)'
],
_routeChanged: function(changeRecord) {
console.log("changeRecord: " + JSON.stringify(changeRecord))
if (changeRecord.path === 'path') {
console.log('Path changed!');
}
},
_viewChanged: function(view) {
console.log("View Changed: " + view)
// load data for view
},
_showPage404: function() {
this.page = 'view404';
}
});
</script>
</dom-module>
"ビュー・ビデオ" 要素：
<link rel="import" href="view-media.html">
<dom-module id="view-videos">
<template id="app">
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/:vid" data="{{videoData}}" tail="{{subRoute}}"></app-route>
<app-route route="{{subRoute}}" pattern="/:category" data="{{category}}" tail="{{subRoutes}}"></app-route>
<app-route route="{{subRoutes}}" pattern="/:cat" data="{{cat}}" tail="{{subRout}}"></app-route>
<iron-pages selected="[[videoData.vid]]" attr-for-selected="data-route" fallback-selection="404">
<section data-route="{{videoData.vid}}">
View Videos {{videoData.vid}}, [[videoData.vid]] ; {{category.category}}, [[category.category]] ; {{cat.cat}}, [[cat.cat]]
<!-- displays the following text on the view-videos url: nodepolymer, nodepolymer ; view-videos, view-videos ; , -->
<br />
<a href="/nodepolymer">Home.</a> | <a href="/nodepolymer/view-videos/view-media">View Info for Media.</a>
<!-- This link will actually be in a repeater and will display a standalone view of the media that is tapped(by passing on an identifier. For testing the routes i have it a simple link. I may later also have another level as "view-video/view-media/my-media-id" for some furhther functions related to the particular media reference). Unable to get this viw intercepted as it defaults to "view-videos" rather than "view-videos/view-media". The URL changes but i see information from "view-video" rather than from "view-media" -->
</section>
<view-media data-route="view-media" route="{{subRoute}}"></view-media>
<section data-route="404">
404
<a href="/nodepolymer">Head back home.</a>
</section>
</iron-pages>
</template>
<script>
Polymer({
is: 'view-videos',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routeChanged(route.*)',
'_viewChanged(routeData.view)'
],
_routeChanged: function(changeRecord) {
console.log("changeRecord: " + JSON.stringify(changeRecord))
if (changeRecord.path === 'path') {
console.log('Path changed!');
}
},
_viewChanged: function(view) {
console.log("View Changed: " + view)
// load data for view
},
_showPage404: function() {
this.page = 'view404';
}
});
</script>
</dom-module>
「ビュー「メディア」要素：
<dom-module id="view-media">
<template id="appbb">
<app-location route="{{rout}}"></app-location>
<app-route route="{{rout}}" pattern="/:pg" data="{{rouData}}" tail="{{tal}}"></app-route>
<iron-pages selected="[[rouData.pg]]" attr-for-selected="data-route" fallback-selection="404">
<section data-route="">
View Media {{rouData.page}}, [[rouData.pg]] <!-- Displays the following data (but view does not switch): nodepolymer, nodepolymer ; view-videos, view-videos ; view-media, view-media -->
<a href="/nodepolymer/view-videos">View Videos.</a><br />
<a href="/nodepolymer/view-music">View Music.</a>
</section>
<section data-route="404">
Oops you hit a 404.
<a href="/nodepolymer">Head back home.</a>
</section>
</iron-pages>
</template>
<script>
Polymer({
is: 'view-media',
properties: {
},
observers: [
],
_routeChanged: function(changeRecord) {
},
_viewChanged: function(view) {
},
_showPage404: function() {
this.page = 'view404';
}
});
</script>
</dom-module>