0
まず、私はかなり騒がしいです。愚かな質問をしたり、同じ質問がすでに別の場所で回答されている場合は、私を失礼します。トピックを検索する。Polymerのページを複数のファイルに分割する
だから私の問題です。私はPolymerを使ってダッシュボードを作成しようとしています。したがって、私は多くのオプション（契約、カレンダー、管理ページ...）を持つナビゲーションバー/メニューを持っています。ポリマースターターキットとそのデモを見ると、ナビゲーションドロワーに関連するすべてのページをindex.htmlファイル内に入れて、<section>マークアップの間に置くように指示されています。
しかし、これらのページには多くのコードが含まれており、多くのページがあります（現時点では12）。私はindex.htmlがすぐに大雑把になり、おそらく "維持しにくい"と "長い読み込み時間"を意味するのではないかと心配しています。
私の質問は次のとおりです。簡単に複数のHTMLファイルにページアプリケーションを分割する方法はありますか？新しいカスタム要素を作成してヘッダーにインポートする場合は、<section>のマークアップの間にそれを使用しますか？
わかりましたので、私はここに与えられてきたアドバイス以下、（それが基づいている私はHTMLimportについて読んだ、とここクロームdeveloppers'ユーチューブ上の「遅延ロード」についてのチュートリアルとは、私がやったことですポリマースターターキット）。問題：それはナビゲーションバーで「契約」をクリック:(
動作しない何もしない、私はそれを得ることはありません：。！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My awesome page</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="elements/elements.html">
</head>
<body unresolved>
<!-- build:remove -->
<span id="browser-sync-binding"></span>
<!-- endbuild -->
<template is="dom-bind" id="app">
<paper-menu class="app-menu" attr-for-selected="data-route" selected="[[route]]">
<a data-route="contracts" href="{{baseUrl}}contracts">
<iron-icon icon="description"></iron-icon>
<span>Contracts</span>
</a>
</paper-menu>
<div class="content">
<iron-pages id="iron" attr-for-selected="data-route" selected="{{route}}">
<section data-route="contracts" tabindex="-1">
<page-contracts id="contracts"></page-contracts>
</section>
<!-- lots of other <section> here -->
</iron-pages>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
、ここでは、ルーティング要素です
<script src="../bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
// 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/
// Removes end/from app.baseUrl which page.base requires for production
if (window.location.port === '') { // if production
page.base(app.baseUrl.replace(/\/$/, ''));
}
// Middleware
function scrollToTop(ctx, next) {
app.scrollPageToTop();
next();
}
function closeDrawer(ctx, next) {
app.closeDrawer();
next();
}
function setFocus(selected){
document.querySelector('section[data-route="' + selected + '"] .page-title').focus();
}
// Routes
page('*', scrollToTop, closeDrawer, function(ctx, next) {
next();
});
/* other routing here */
page('/contrats', function() {
if (Polymer.isInstance(this.$.contrats)) {
app.route = "contrats";
return;
}
Polymer.base.importHref(
"/page-contrats/page-contrats.html", function() {
app.route = "contrats";
return;
}
)
});
/* other routing here */
// 404
page('*', function() {
app.$.toast.text = 'Impossible to find: ' + window.location.href + '. Redirecting to dashboard';
app.$.toast.show();
page.redirect(app.baseUrl);
});
// add #! before urls
page({
hashbang: true
});
});
</script>
「ナビゲーション・ドロワーに関連するすべてのページ」の「ページ」とは何ですか？ 「マークアップ間」とは何ですか？ 「新しいカスタム要素を作成してヘッダーにインポートした後、マークアップ間で使用するか」はい、通常はコンポーネントごとにファイルがあり、それをインポートするだけです。別のコンポーネントにコンポーネントのセットをラップしてから、このコンポーネントをインポートして追加するだけで、表示されているすべてのコンポーネントを取得できます。あなたの質問とあなたが実際に達成したいことを明確にしてください。 –
ようこそ、ようこそ、質問をするときにもう少し具体的にしてください：あなたは何を試して、何を期待しているなど参照してください[参照する方法]（http://stackoverflow.com/help/how-to-ask） – Nehal
HTMLインポートがサイトをモジュール化するのに役立つかもしれません。 HTML文書を他のHTML文書に組み込んで再利用する方法を提供します。 'html imports'と' web components'を検索します。 PolymerはWebコンポーネントの上に構築されるため、互換性があります。 –