Question

首先，我是一个菜鸟，所以如果我提出愚蠢的问题，或者如果在其他地方已经回答了同样的问题，请原谅我：我可能不知道有效搜索主题的权利条款。

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

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

所以我的问题如下：有没有办法轻松将页面应用程序拆分成多个html文件？就像创建一个新的自定义元素并将其导入标题一样，然后在<section>标记之间使用它？

好的，按照我在这里给出的建议，我已经阅读了关于HTMLimport的内容，以及关于Chrome开发者'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>

Answer 1

您的路由页面需要如下所示：

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

你的需要看起来像这样：

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

希望我帮助过。

将页面拆分为Polymer中的多个文件

1 个答案: