在Polymer中将页面拆分成多个文件

首先，我是一个小菜鸟，所以如果我问了一些愚蠢的问题，或者其他地方已经回答了相同的问题，请原谅我：我可能不知道有效的权利条款搜索一个主题。在Polymer中将页面拆分成多个文件

所以这是我的问题。我正在尝试使用Polymer创建仪表板。因此，我将拥有一个包含许多选项（合同，日历，管理页面......）的导航栏/菜单。在查看聚合物入门工具包及其演示时，我们被告知将与导航抽屉相关的所有页面放入index.html文件中，在<section>之间标记。

但是，这些页面可能包含很多代码，并且会有很多页面（目前有12个）。我担心index.html很快会变得庞大，这可能意味着“难以维护”和“长时间加载”。

所以我的问题是以下几点：有没有一种方法可以轻松地将页面应用程序分成多个html文件？像创建一个新的自定义元素并将其导入到标题中，然后在<section>标记之间使用它？

好了，所以，下面我一直在这里给出的建议，我读过有关HTMLimport，并在Chrome developpers' YouTube“的视频延迟加载”和这里的教程是我所做的（它是基于聚合物起始剂试剂盒）。问题：它不会在导航栏“合同”工作:(
点击什么也不做我不明白这一点：！/ 请帮助我

<!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>

来源

2016-03-21 SKMTH

什么是“与导航抽屉相关的所有页面”中的“页面”。什么是“加价”？如果“喜欢......创建一个新的自定义元素并将其导入到标题中，然后在标记之间使用它”？是比是的问题，通常你每个组件有一个文件，只是导入它。您可以将一组组件包装到另一个组件中，然后只需导入并添加该组件即可获取所有内容。请澄清你的问题和你真正想要完成的事情。 –

欢迎来到SO，在提问时请稍微具体一点：您尝试过什么，期望什么等。请参阅[如何提问]（http://stackoverflow.com/help/how-to-ask） – Nehal

也许HTML Imports可以帮助你模块化你的网站。它提供了一种在其他HTML文档中包含和重用HTML文档的方法。搜索'html imports'和'web components'。聚合物建立在Web组件之上 - 所以这应该是兼容的。 –

你的路由页needds看起来像这样：

<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>

在你elements.html需要导入的页面：

<link rel="import" href="/page-contrats/page-contrats.html">

而且你enement需要看起来像这样：

<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>

希望我帮助。

来源

2016-04-08 08:32:14

在Polymer中将页面拆分成多个文件

回答

相关问题