Наследование настраиваемого полимерного элемента в версии 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.

Вы можете попытаться извлечь общее поведение обоих пользовательских элементов в отдельное поведение, которое вы реализуете в оба ваших пользовательских элементов:

плитка-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>