Polymer 将页面拆分为多个文件
首先，我是一个不学无术的人，所以如果我问了一些愚蠢的问题，或者如果同样的问题已经在其他地方得到了回答，请原谅：我可能不知道有效搜索主题的权利术语 这就是我的问题。我正在尝试使用聚合物创建仪表板。因此，我将有一个导航栏/菜单，有许多选项（合同、日历、管理页面…）。在查看polymer starter工具包及其演示时，我们被告知将与导航抽屉相关的所有页面放在index.html文件中，在Polymer 将页面拆分为多个文件,polymer,polymer-1.0,polymer-starter-kit,Polymer,Polymer 1.0,Polymer Starter Kit,首先，我是一个不学无术的人，所以如果我问了一些愚蠢的问题，或者如果同样的问题已经在其他地方得到了回答，请原谅：我可能不知道有效搜索主题的权利术语 这就是我的问题。我正在尝试使用聚合物创建仪表板。因此，我将有一个导航栏/菜单，有许多选项（合同、日历、管理页面…）。在查看polymer starter工具包及其演示时，我们被告知将与导航抽屉相关的所有页面放在index.html文件中，在标记之间 但是，这些页面可能包含很多代码，并且会有很多页面（目前为12页）。我担心index.html很快就会变得
好吧，根据这里给我的建议，我已经在Chrome Developers的youtube上阅读了关于HTMLimport和关于“延迟加载”的教程，下面是我所做的（它基于polymer starter kit）。问题：它不工作：（
点击导航栏中的“合同”没有任何作用。我不明白：/ 请帮帮我
<!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>
addEventListener（'WebComponentsReady'，function（）{
//我们使用Page.js进行路由。这是一个微型
//受Express router启发的客户端路由器
//更多信息：https://visionmedia.github.io/page.js/
//从page.base生产所需的app.baseUrl中删除end/from
if（window.location.port==''）{//if生产
page.base（app.baseUrl.replace（/\/$/，“”））；
}
//中间件
函数scrollToTop（ctx，下一个）{
app.scrollPageToTop（）；
next（）；
}
功能关闭抽屉（ctx，下一个）{
app.closeDrawer（）；
next（）；
}
功能设置焦点（已选择）{
document.querySelector（'section[data route=“”+selected+”].page title'）.focus（）；
}
//路线
页面（“*”，滚动顶部，closeDrawer，函数（ctx，下一页）{
next（）；
});
/*这里还有其他路线吗*/
页面（'/contrats'，函数（）{
if（聚合物存在（本合同）{
app.route=“合同”；
返回；
}
Polymer.base.importHref(
“/page contats/page contats.html”，函数（）{
app.route=“合同”；
返回；
}
)
});
/*这里还有其他路线吗*/
// 404
页面（'*'，函数（）{
app.$.toast.text='不可能找到：'+window.location.href+'。重定向到仪表板'；
app.$.toast.show（）；
页面重定向（app.baseUrl）；
});
//在URL之前添加#
页面({
哈什邦：是的
});
});
<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() {
app.route = 'contrats';
setFocus(app.route);
});
/* 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>
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../elements.html">
<dom-module id="contrats">
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
}
</style>
<your-code-here>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'contrats',
});
})();
</script>
</dom-module>
addEventListener（'WebComponentsReady'，function（）{
//我们使用Page.js进行路由。这是一个微型
//受Express router启发的客户端路由器
//更多信息：https://visionmedia.github.io/page.js/
//从page.base生产所需的app.baseUrl中删除end/from
if（window.location.port==''）{//if生产
page.base（app.baseUrl.replace（/\/$/，“”））；
}
//中间件
函数scrollToTop（ctx，下一个）{
app.scrollPageToTop（）；
next（）；
}
功能关闭抽屉（ctx，下一个）{
app.closeDrawer（）；
next（）；
}
功能设置焦点（已选择）{
document.querySelector（'section[data route=“”+selected+”].page title'）.focus（）；
}
//路线
页面（“*”，滚动顶部，closeDrawer，函数（ctx，下一页）{
next（）；
});
/*这里还有其他路线吗*/
页面（'/contrats'，函数（）{
app.route=‘合同’；
设置焦点（应用程序路径）；
});
/*这里还有其他路线吗*/
// 404
页面（'*'，函数（）{
app.$.toast.text='不可能找到：'+window.location.href+'。重定向到仪表板'；
app.$.toast.show（）；
页面重定向（app.baseUrl）；
});
//在URL之前添加#
页面({
哈什邦：是的
});
});
<link rel="import" href="/page-contrats/page-contrats.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() {
app.route = 'contrats';
setFocus(app.route);
});
/* 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>
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../elements.html">
<dom-module id="contrats">
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
}
</style>
<your-code-here>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'contrats',
});
})();
</script>
</dom-module>
：主持人{
显示：块；
}
（功能（）{
"严格使用",；
聚合物({
是‘合同’，
});
})();
希望我能帮上忙。什么是“与导航抽屉相关的所有页面”中的“页面”。什么是“标记之间”？如果“喜欢……创建新的自定义元素并将其导入标题，然后在标记之间使用它？”问题是，是的，通常每个组件都有一个文件，然后导入。你可以将一组组件包装到另一个组件中，然后导入并添加此组件，以显示其所有内容。请澄清你的问题以及你实际想要完成的任务。欢迎这样做，问问题时请更具体一点：什么I don’你没有尝试过，你期望什么，等等。看看HTML导入可能会帮助你模块化你的网站。它提供了一种在其他HTML文档中包含和重用HTML文档的方法。搜索
HTML导入web组件