Разделение страниц на несколько файлов в Polymer

Прежде всего, я совершенно нуб, поэтому, пожалуйста, извините меня, если я задаю глупые вопросы или если на тот же вопрос уже был дан ответ в другом месте: я мог бы не знать прав на поиск темы.Разделение страниц на несколько файлов в Polymer

Итак, вот моя проблема. Я пытаюсь создать панель управления с помощью Polymer. Поэтому у меня будет панель навигации/меню со многими опциями (контракты, календари, страница администратора ...). Если посмотреть на комплект для полимерного стартера и его демоверсию, нам говорят, чтобы все страницы были связаны с ящиком навигации в файле index.html, между <section> разметками.

Однако эти страницы могут содержать много кода, и будет много страниц (12 на данный момент). Я опасаюсь, что index.html скоро станет многогранным, что, вероятно, будет означать «трудно поддерживать» и «длительное время загрузки».

Итак, мой вопрос заключается в следующем: есть ли способ легко разбить приложение страницы на несколько html-файлов? Как создать новый пользовательский элемент и импортировать его в заголовок, а затем использовать его между метками <section>?

Хорошо так, следуя советам я Приводимые здесь я читал HTMLimport, и учебник о «Ленивая загрузка» на YouTube базе Chrome developpers' и вот что я сделал (он основан на полимерный стартовый комплект). Проблема: не работает :(
Клик на «Контракты» в навигационной панели ничего не делает, я не понимаю:.!/ Помогите мне пожалуйста

<!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 import' и' веб-компоненты'. Полимер построен поверх веб-компонентов, поэтому он должен быть совместимым. –

Ваша страница маршрутизации 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

ответ

Смежные вопросы