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>

Now insert the element like so

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

Edit: The styles that affect your index.html will not affect your custom component. Add styles INSIDE your custom component to have them included

Polymer 1.0：split index.html

1 个答案: