聚合物 1.0：拆分 index.html

Question

我想拆分我的 index.html 文件，因为它太长（超过 500 行），因为有很多子菜单，如下所示。

<paper-submenu>
<paper-item class="menu-trigger">
<iron-icon icon="add-circle-outline"></iron-icon>
<span>Medical</span>
</paper-item>
<paper-menu class="menu-content">
<a data-route="medical" href="/medical">
 <paper-item>
  <span>Introduction</span>
 </paper-item>
</a>

是否可以将 index.html 中的所有子菜单行存储到另一个文件中？

提前致谢。

Answer 1

<link rel="import" href="../../bower_components/polymer/polymer.html">
<!-- Make sure to add other dependencies here -->

<dom-module id="test-comp">
  <template>
    <paper-submenu>
      <paper-item class="menu-trigger">
        <iron-icon icon="add-circle-outline"></iron-icon>
        <span>{{title}}</span>
      </paper-item>
      <paper-menu class="menu-content">
        <a data-route="{{dataRoute}}" href="{{href}}">
          <paper-item>
            <span>{{item}}</span>
          </paper-item>
        </a></paper-menu>
    </paper-submenu>
  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'test-comp',

        properties: {
          title: {},
          dataRoute: {},
          href: {},
          item: {},
        },


      });
    })();
  </script>

</dom-module>

现在像这样插入元素

<test-comp title="Medical" data-route="medical" href="/medical" item="Introduction"></test-comp>

编辑：影响您 index.html 的样式不会影响您的自定义组件。在您的自定义组件中添加样式以包含它们

聚合物 1.0：拆分 index.html

Polymer 1.0 : split index.html

polymer-1.0