聚合物DOM-重复内容取决于接收的数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了聚合物DOM-重复内容取决于接收的数据相关的知识,希望对你有一定的参考价值。

我做了一个DOM-repeat,它接收了多种类型的数据。 现在我希望DOM-repeat只显示与该类型相关的项目。 是否可以这样做,我将如何实现这一目标? 当item.Type是Zone时,我希望它显示item.Name和item.ZoneID 当item.Type为Building时,我希望它显示item.BuildingID,item.Address1和item.Address2

这是我的代码:

 <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>
答案

类似于'HakanC'提出的东西,但不同的是,你可以使用dom-if并绑定你的过滤函数的响应:

这是一个工作jsfiddle(用于铬)

<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>
另一答案

您可以将dom-if用作dom-repeat作为休耕。

<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");
  }

用上面的逻辑应该解决问题。

以上是关于聚合物DOM-重复内容取决于接收的数据的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的DOM操作

聚合物重复模板问题

jQuery学习手册

在 GraphQL 中重用输入类型作为片段 [重复]

阴影 dom 内的聚合物元素有效,但没有样式

jQuery 核心函数