1.0版本中自定义聚合物元素的继承

Inheritance of customized polymer element in version 1.0

我有两个具有相似特性的聚合物元件。我正在尝试 "merge" 那些二对一的元素。我在文档中看到的是自定义元素不能在 polymer 1.0 中被继承。

从这里开始:

<div title="{{tile.description}}" class="flex-item">
    <template is='dom-if' if='{{typeIsSingle}}'>
        <single-item-tile tile='{{tile}}'></single-item-tile>
    </template>
    <template is='dom-if' if='{{typeIsGrouped}}'>
        <multiple-items-tile tile='{{tile}}'></multiple-items-tile>
    </template>
    ...

这是两个非常相似的元素:

<dom-module id="single-item-tile">

    <style>
        .big {
            --iron-icon-width: 96px;
            --iron-icon-height: 96px;
        }
    </style>

    <template>
        <paper-button on-click="navigateTo">
            <iron-icon class="big" icon="{{icon}}"></iron-icon>
            <h4>{{tile.label}}</h4>
        </paper-button>
    </template>

    <script>
        Polymer({
            is: 'single-item-tile',
            properties: {
                label: String,
                icon: {
                    type: String,
                    value: "check-box-outline-blank"
                },
                tile: Object
            },
            navigateTo: function () {
                window.open(this.tile.url + "?id=" + this.tile.landingPageQuestionnaireItems[0].id);
            }
        });
    </script>

</dom-module>

并且:

<dom-module id="multiple-items-tile">

    <style>
        .big {
            --iron-icon-width: 96px;
            --iron-icon-height: 96px;
        }
        paper-dialog.size-position {
            position: relative;
            top: -180px;
            left: 20px;
            min-width: 200px;
            min-height: 150px;
            background: #fff;
        }
        .questionnaireItemToChoose:hover {
            background-color: #e3e3e3;
        }
    </style>

    <template>
        <paper-button on-click="showGroupedItems">
            <iron-icon class="big" icon="{{icon}}"></iron-icon>
            <h4>{{tile.label}}</h4>
        </paper-button>

        <paper-dialog id="questionnaire-selector" class="big size-position" heading="Questionnaires" >
            <iron-selector>
                <template is='dom-repeat' items='{{tile.landingPageQuestionnaireItems}}'>
                    <div id="{{item.id}}" class="questionnaireItemToChoose" on-click="handleClick">{{item.label}}</div>
                </template>
            </iron-selector>
        </paper-dialog>

    </template>

    <script>
        Polymer({
            is: 'multiple-items-tile',
            properties: {
                label: String,
                icon: {
                    type: String,
                    value: "content-copy"
                },
                tile: Object
            },
            showGroupedItems: function (e) {
                var dialog = document.getElementById('questionnaire-selector');
                if (dialog) {
                    dialog.open();
                }
            },
            handleClick: function(e) {
                var dialog = document.getElementById('questionnaire-selector');
                dialog.close();
                window.open(this.tile.url + "?id=" + e.currentTarget.id);
            }
        });
    </script>

</dom-module>

共享 Polymer 1.0 中缺少继承的当前解决方法 behaviors

您可以尝试将两个自定义元素的共同行为提取到您在两个自定义元素中实现的单独行为中:

平铺-behavior.html:

<script>
    TiteBehavior = {

      properties: {
        label: String,
        icon: {
          type: String,
          value: "content-copy"
        },
        tile: Object
      },
      commonFunction: function() { },
      ....
    };
</script>

<dom-module id="multiple-items-tile">
 ...
 <script>
     Polymer({
        is: 'multiple-items-tile',
        behaviors: [TileBehavior],
     });
 </script>
</dom-mdoule>

<dom-module id="single-item-tile">
 ...
 <script>
     Polymer({
        is: 'single-item-tile',
        behaviors: [TileBehavior],
     });
 </script>
</dom-mdoule>