まず第一に、私は非常に初心者なので、ばかげた質問をしたり、同じ質問が他の場所で既に回答されている場合は、すみません: トピックを効果的に検索するための適切な用語を知らない可能性があります.
ここに私の問題があります。Polymer を使用してダッシュボードを作成しようとしています。したがって、多くのオプション (契約、カレンダー、管理ページなど) を備えたナビゲーション バー/メニューを用意します。Polymer スターター キットとそのデモを見ていると、ナビゲーション ドロワーに関連するすべてのページを index.html ファイル内の<section>マークアップの間に配置するように指示されています。
ただし、これらのページには多くのコードが含まれている可能性があり、多くのページ (現時点では 12 ページ) になります。私は、index.html がすぐに巨大になることを恐れています。これは、おそらく「保守が困難」であり、「読み込み時間が長い」ことを意味します。
私の質問は次のとおりです。ページアプリを複数のhtmlファイルに簡単に分割する方法はありますか? 新しいカスタム要素を作成してヘッダーにインポートし、それを<section>マークアップ間で使用しますか?
さて、ここで与えられたアドバイスに従って、HTMLimport について読み、Chrome 開発者の youtube で「遅延読み込み」に関するチュートリアルを読みました。問題: 動作しません :(
ナビゲーション バーの [Contracts] をクリックしても何も起こりません。わかりません :/ 助けてください!
<!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>