在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中將頁面拆分成多個文件

回答

相關問題