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

Question

我有两个具有相似特性的聚合物元件。我正在尝试将这两个元素“合并”为一个元素。我在文档中看到的是自定义元素不能在聚合物 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>

Answer 1

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

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

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