Her şeyden önce, çok aptalım, bu yüzden aptalca sorular sorduğumda veya aynı soru başka bir yerde daha önce yanıtlanmış olsaydı özür dilerim. Bir konu için arama yapın.Sayfaları Polymer'da birden çok dosyaya bölme
İşte benim sorunum. Polymer kullanarak bir pano oluşturmaya çalışıyorum. Bu nedenle, birçok seçeneğiyle (sözleşmeler, takvimler, yönetici sayfaları ...) bir nav bar/menüye sahip olacağım. Polimer başlangıç kitine ve onun demosuna bakarken, gezinti çekmecesi ile ilgili tüm sayfaları index.html dosyasında <section> işaretlemeleri arasına koymamız söylendi. Bununla birlikte, bu sayfalar çok fazla kod içerebilir ve çok sayıda sayfa (şu anda 12 tane) olacaktır. İndeks.html kısa bir süre sonra, "sürdürmesi zor" ve "uzun yükleme süresi" anlamına gelecek olan humojik olacağından korkuyorum.
Bu yüzden sorum şu: Sayfa uygulamasını kolayca birden çok html dosyasına bölmenin bir yolu var mı? Yeni bir özel öğe oluşturmak ve onu başlıkta içe aktarmak gibi, <section> işaretlemeleri arasında kullanmak mı?
Tamam bu yüzden, ben burada verilen oldum önerileri aşağıdaki, ben HTMLimport okudum ve burada Krom Developpers' youtube "Tembel yükleme" ve yaklaşık öğretici ne yaptım (o dayanmaktadır polimer başlangıç kiti). Sorun:!. O gezinme çubuğu üzerinde "Sözleşmeler" konulu :(
tıkladığınızda çalışmıyor ben alamadım hiçbir şey yapmaz:/ yardım edin lütfen
<!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>
ve burada yönlendirme elemanı var:
Bu gibi görünmek<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>
"Gezinme çekmecesiyle ilgili tüm sayfalarda" sayfalar nedir? "İşaretlemeler" arasında ne var? "Gibi ... yeni bir özel öğe oluşturup onu başlıkta içe aktarıyor, sonra işaretlemeler arasında mı kullanıyorsunuz?" soru, evet, genellikle, bileşen başına bir dosya var ve sadece onu içe aktarın. Bir bileşen grubunu başka bir bileşene sarabilir ve ardından içeriğinin tamamını görüntülemek için içe aktarıp bunu ekleyebilirsiniz. Lütfen sorunuza ve gerçekte ne yapmak istediğinize açıklık getirin. –
SO'ya hoş geldiniz, lütfen soru sorduğunuzda biraz daha spesifik olun: ne denediniz, ne bekliyorsunuz, vs. Bkz. [Nasıl yapılır] (http://stackoverflow.com/help/how-to-ask) – Nehal
Belki HTML İthalatı sitenizi modülerleştirmenize yardımcı olabilir. HTML belgelerini diğer HTML belgelerine dahil etmek ve yeniden kullanmak için bir yol sunar. Html imports ve web bileşenleri için arama yapın. Polimer, Web Bileşenlerinin üzerine yerleştirilmiştir - bu yüzden uyumlu olmalıdır. –