Polymer DOM-Wiederholung Inhalt in Abhängigkeit von empfangenen Daten

Question

Ich habe eine DOM-Wiederholung, die mehrere Arten von Daten erhält gemacht.
Jetzt möchte ich die DOM-Wiederholung nur die Elemente zu diesem Typ anzeigen.
Ist das möglich und wie könnte ich das erreichen?
Wenn die item.Type Zone ist, ich will es die item.Name und item.ZoneID
anzuzeigen, wenn die item.Type Building ich es will

die item.BuildingID, item.Address1 und item.Address2 anzuzeigen Dies ist

mein Code:

<template is="dom-repeat" items="[[data]]"> 
      <paper-card id="departmentspaperContainer2"> 
      <div class="card-content"> 
       <h3>Type: {{item.Type}}</h3> 
       <hr/> 
       <h4>Name:  {{item.Name}}</h4> 
       <h4>BuildingID: {{item.BuildingID}}</h4> 
       <h4>ZoneID:  {{item.ZoneID}}</h4> 
       <h4>Address1: {{item.Address1}}</h4> 
       <h4>Address2: {{item.Address2}}</h4> 
      </div> 
      </paper-card> 
     </template> 

Answer 1

Etwas ähnlich dem, was ‚HakanC‘ schlägt, aber anders, können Sie die dom-if und binden die Reaktion Ihres Filterfunktion:

ist hier ein Arbeits jsfiddle (in Chrom verwenden)

<dom-module id="os-test"> 
    <template> 
     <template is="dom-repeat" items="{{data}}"> 
      <paper-card id="departmentspaperContainer2"> 
       <div class="cardContent" type="{{item.Type}}"> 
        <h3>Type: [[item.Type]]</h3> 
        <hr/> 
        <template is='dom-if' if='{{showZone(item.Type)}}'> 
        <h4>Name: [[item.Name]]</h4> 
        <h4>ZoneID: [[item.ZoneID]]</h4> 
        </template> 
        <template is='dom-if' if='{{showBuilding(item.Type)}}'> 
        <h4>BuildingID:[[item.BuildingID]]</h4> 
        <h4>Address1: [[item.Address1]]</h4> 
        <h4>Address2: [[item.Address2]]</h4> 
        </template> 
       </div> 
      </paper-card> 
     </template> 
    </template> 
</dom-module> 
<script> 
    class OsTestElement extends Polymer.Element { 
    static get is() { 
     return 'os-test'; 
    } 

    static get properties() { 
     return { 
     data: { 
      type: Array, 
      value:() => { 
      return [ 
       { 
       Type:"Zone", 
       Name:"valueName1", 
       BuildingID:"valueBuildingID1", 
       ZoneID:"valueZoneID1", 
       Address1:"valueAddress11", 
       Address2:"valueAddress21", 
       }, 
       { 
       Type:"Zone", 
       Name:"valueName2", 
       BuildingID:"valueBuildingID2", 
       ZoneID:"valueZoneID2", 
       Address1:"valueAddress12", 
       Address2:"valueAddress22", 
       }, 
       { 
       Type:"Building", 
       Name:"valueName3", 
       BuildingID:"valueBuildingID3", 
       ZoneID:"valueZoneID3", 
       Address1:"valueAddress13", 
       Address2:"valueAddress23", 
       }, 
       { 
       Type:"Building", 
       Name:"valueName4", 
       BuildingID:"valueBuildingID4", 
       ZoneID:"valueZoneID4", 
       Address1:"valueAddress14", 
       Address2:"valueAddress24", 
       } 
      ] 
      } 
     } 
     } 
    } 

    showZone(item) { 
     return (item==="Zone"); 
    } 

    showBuilding(item) { 
     return (item==="Building"); 
    } 
    } 
    window.customElements.define(OsTestElement.is, OsTestElement); 
</script> 

Answer 2

Sie dom-if in dom-repeat als Brache verwenden.

<template is="dom-repeat" items="[[data]]"> 
      <paper-card id="departmentspaperContainer2"> 
      <div class="card-content"> 
       <h3>Type: {{item.Type}}</h3> 
       <hr/> 
       <h4>Name:  {{item.Name}}</h4> 

       <template is='dom-if' if='{{_show(item.Type)}}'> 
       <h4>ZoneID:  {{item.ZoneID}}</h4> 
       </template> 
       <template is='dom-if' if='{{!_show(item.Type)}}'> 
       <h4>BuildingID: {{item.BuildingID}}</h4> 
       <h4>Address1: {{item.Address1}}</h4> 
       <h4>Address2: {{item.Address2}}</h4> 
       </template> 
      </div> 
      </paper-card> 
     </template> 

....

_show(it){ 
     return (it === "Zone"); 
    } 

Mit der obigen Logik sollte das Problem lösen.