Teilen von Seiten in mehrere Dateien in Polymer

Zunächst einmal, ich bin ziemlich ein Noob also bitte entschuldigen Sie, wenn ich dumme Fragen stelle, oder wenn die gleiche Frage bereits an anderer Stelle beantwortet wurde: Ich könnte die Rechte Begriffe zu effektiv nicht wissen suche nach einem Thema.Teilen von Seiten in mehrere Dateien in Polymer

Also hier ist mein Problem. Ich versuche ein Dashboard mit Polymer zu erstellen. Daher werde ich eine Navigationsleiste/Menü mit vielen Optionen haben (Verträge, Kalender, Admin-Seite ...). Während wir uns das Polymer-Starter-Kit und seine Demo ansehen, werden wir aufgefordert, alle Seiten, die mit der Navigationsleiste in Verbindung stehen, innerhalb der index.html-Datei zwischen <section> Markups zu setzen.

Diese Seiten können jedoch viel Code enthalten, und es wird viele Seiten geben (12 im Moment). Ich fürchte, die index.html wird bald enorm, was wahrscheinlich "schwer zu warten" und "lange Ladezeit" bedeutet.

Also meine Frage ist die folgende: Gibt es eine Möglichkeit, die Seite App in mehrere HTML-Dateien leicht zu teilen? Wie erstellt man ein neues benutzerdefiniertes Element und importiert es in die Kopfzeile, und verwendet es dann zwischen den <section> Markups?

Okay, so, im Anschluss an die Ratschläge ich hier gegeben habe, habe ich über HTMLimport lesen, und das Tutorial über „Lazy Loading“ auf Chrome developpers' youtube und hier ist was ich getan habe (es basiert auf Polymer Starterkit). Problem: es ist :(
Ein Klick auf "Verträge" in der Navigationsleiste nicht funktionieren tut nichts, ich verstehe es nicht.!/ mir bitte helfen

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

und hier ist das Routing-Element:

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

Quelle

2016-03-21 SKMTH

Was ist eine "Seite" in "alle Seiten in Bezug auf die Navigationsleiste". Was ist "zwischen Markups"? Wenn "Wie ... ein neues benutzerdefiniertes Element erstellt und in die Kopfzeile importiert wird, dann wird es zwischen den Markierungen verwendet?" ist die Frage, als ja, normalerweise hast du eine Datei pro Komponente und importierst sie einfach. Sie können eine Reihe von Komponenten in eine andere Komponente einfügen und diese dann importieren und hinzufügen, um den gesamten Inhalt anzuzeigen. Bitte klären Sie Ihre Frage und was Sie eigentlich erreichen möchten. –

Willkommen bei SO, bitte seien Sie etwas genauer, wenn Sie Fragen stellen: Was haben Sie versucht, was erwarten Sie, etc. Siehe [how to ask] (http://stackoverflow.com/help/how-to-ask) – Nehal

Vielleicht könnten HTML-Importe Ihnen helfen, Ihre Website zu modularisieren. Es bietet eine Möglichkeit, HTML-Dokumente in andere HTML-Dokumente einzubinden und wiederzuverwenden. Suchen Sie nach 'html imports' und' web components'. Polymer ist auf Webkomponenten aufgebaut - also sollte dies kompatibel sein. –

Ihre Routing-Seite needds wie folgt aussehen:

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

In Ihrem elements.html müssen Sie die Seite importieren:

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

Und Ihre enement muss wie folgt aussehen:

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

Hoffe, dass ich geholfen.

Quelle

2016-04-08 08:32:14

Teilen von Seiten in mehrere Dateien in Polymer

Antwort

Verwandte Themen