聚合物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-重复内容取决于接收的数据的主要内容,如果未能解决你的问题,请参考以下文章