0

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

所以这是我的问题。我正在尝试使用 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>
4

1 回答 1

0

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

<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-08T08:32:14.837 回答