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

The current workaround for the lack of inheritance in Polymer 1.0 are shared behaviors.

You can try to extract the common behavior of both custom elements into a separate behavior which you implement in both of your custom elements:

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>

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

1 个答案: