[英]Why can't I see my dynamically added iron-pages element on my webpage?
I'm using the following tutorial : https://vaadin.com/components/vaadin-tabs/html-examples/tabs-advanced-demos 我正在使用以下教程: https : //vaadin.com/components/vaadin-tabs/html-examples/tabs-advanced-demos
Here is my custom element : 这是我的自定义元素:
<dom-module id="bps-devices-tabs-container">
<template>
<style>
.flex {
width: 100%;
height : 100%;
}
.device-container {
display: flex;
flex-direction: column;
}
.ip {
height : 70vh;
overflow: auto;
}
</style>
<div>
<vaadin-tabs id="tabs" selected={{deviceType}} attr-for-selected="name" role="navigation"></vaadin-tabs>
<div class="flex">
<iron-pages class="ip"
id="pages"
selected="[[deviceType]]"
attr-for-selected="name"
role="main">
</iron-pages>
</div>
</div>
</template>
<script>
class BpsDevicesTabsContainer extends Polymer.Element {
static get is() { return 'bps-devices-tabs-container'; }
static get properties() {
return {
deviceTitles : {
type : Array
},
deviceData : {
type : Array
},
deviceType: {
type: String
}
}
}
connectedCallback(){
super.connectedCallback();
this._renderTabs();
}
_renderTabs(){
console.log("render device tabs");
var tabs = this.$.tabs;
var pages = this.$.pages;
var i;
for(i = 0;i < this.deviceTitles.length;i++){
var name = this.deviceTitles[i].toUpperCase();
var tab = document.createElement('vaadin-tab');
Polymer.dom(tab).setAttribute('name', name);
Polymer.dom(tab).innerHTML = name;
var page = document.createElement('bps-device-container');
page.data = this.deviceData[i];
Polymer.dom(page).setAttribute('id', name + 'tab');
Polymer.dom(page).setAttribute('name',name);
Polymer.dom(page).setAttribute('class','device-container');
tabs.appendChild(tab);
pages.appendChild(page);
}
}
}
customElements.define(BpsDevicesTabsContainer.is, BpsDevicesTabsContainer);
</script>
</dom-module>
I am dynamically adding vaadin tabs and subsequent iron pages to my UI. 我正在动态地将vaadin标签和随后的铁页面添加到我的UI中。 I'm able to successfully render the tabs but cannot get my custom element bps-device-container to show. 我能够成功渲染选项卡,但无法显示我的自定义元素bps-device-container。 Here is my bps-device-container element : 这是我的bps-device-container元素:
<dom-module id="bps-device-container">
<template>
<style></style>
<h1>Testing Device Container</h1>
</template>
<script>
class BpsDeviceContainer extends Polymer.Element {
static get is() { return 'bps-device-container'; }
static get properties() {
return {
data : {
type : Object
}
}
}
connectedCallback(){
super.connectedCallback();
console.log(this.data);
}
}
customElements.define(BpsDeviceContainer.is, BpsDeviceContainer);
</script>
</dom-module>
Using Chrome developer tools, I got the following : 使用Chrome开发人员工具,我得到以下信息:
Why is the height still 0 even though I've tried changing the dimensions in my style tags? 即使我尝试更改样式标签中的尺寸,为什么高度仍为0? I've tried various things but can't get the pages to show. 我尝试了各种各样的东西,但无法显示页面。
Was stuck on this issue for a day and half, turns out it was the attr-for-selected attribute that was causing problems. 被困在这个问题上的一天半,结果是导致问题的attr-for-selected属性。 I removed it for both the vaadin tabs and iron pages and it works fine now. 我为vaadin选项卡和铁页都删除了它,现在工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.