When I try to include dom-repeat inside paper-tabs, I am getting blank display instead of dom-repeat values
DOM-repeat works fine outside paper-tabs but inside paper-tab
Codepen- https://codepen.io/nagasai/pen/gxPQqQ
HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-tabs/paper-tab.html">
<link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
<x-custom></x-custom>
<dom-module id="x-custom">
<template>
<template is="dom-repeat" items="{{employees}}">
<div class="test">
<div># [[index]]</div>
<div>First name: <span>[[item.first]]</span></div>
<div>Last name: <span>[[item.last]]</span></div>
<div><img src="[[item.image]]" width="50px"></div>
</div>
</template>
</template>
<dom-bind><template>
<paper-tabs selected="{{selected}}" attr-for-selected="tab-name" fallback-selection="ui">
<paper-tab tab-name="ui">Grid</paper-tab>
<paper-tab tab-name="table">Table</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}" attr-for-selected="tab-name" fallback-selection="ui" class="mainSection">
<div tab-name="ui">
<template>
<template is="dom-repeat" items="{{employees}}">
<div class="test">
<div># [[index]]</div>
<div>First name: <span>[[item.first]]</span></div>
<div>Last name: <span>[[item.last]]</span></div>
<div><img src="[[item.image]]" width="50px"></div>
</div>
</template>
</template>
</div>
<div tab-name="table">
Table
</div>
</iron-pages>
</template>
</dom-bind>
</dom-module>
JS:
class XCustom extends Polymer.Element {
static get is() { return 'x-custom'; }
static get properties() {
return {
employees: {
type: Array,
value() {
return [
{first: 'Bob', last: 'Smith',image:'https://dummyimage.com/300.png/09f/fff'},
{first: 'Adam', last: 'Gilchrist',image:'https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png'},
{first: 'Sally', last: 'Johnson'},
];
}
}
}
}
}
customElements.define(XCustom.is, XCustom);
Codepen: https://codepen.io/Sahero/pen/RZrvPN?editors=1111
HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-tabs/paper-tab.html">
<link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
<x-custom></x-custom>
<dom-module id="x-custom">
<template>
<dom-repeat items="{{employees}}">
<template>
<div class="test">
<div># [[index]]</div>
<div>First name: <span>[[item.first]]</span></div>
<div>Last name: <span>[[item.last]]</span></div>
<div><img src="[[item.image]]" width="50px"></div>
</div>
</template>
</dom-repeat>
<paper-tabs selected="{{selected}}" attr-for-selected="tab-name" fallback-selection="ui">
<paper-tab tab-name="ui">Grid</paper-tab>
<paper-tab tab-name="table">Table</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}" attr-for-selected="tab-name" fallback-selection="ui" class="mainSection">
<div tab-name="ui">
<dom-repeat items="{{employees}}">
<template>
<div class="test">
<div># [[index]]</div>
<div>First name: <span>[[item.first]]</span></div>
<div>Last name: <span>[[item.last]]</span></div>
<div><img src="[[item.image]]" width="50px"></div>
</div>
</template>
</dom-repeat>
</div>
<div tab-name="table">
Table
</div>
</iron-pages>
</template>
</dom-module>
Removed <dom-bind> and changed the end-tag of the first <template> just above the </dom-module>.
JS: Same as above.