javascript - 为什么我在我的网页上看不到我动态添加的 iron-pages 元素?
问题描述
我正在使用以下教程:https ://vaadin.com/components/vaadin-tabs/html-examples/tabs-advanced-demos
这是我的自定义元素:
<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>
我正在向我的 UI 动态添加 vaadin 选项卡和后续的铁页。我能够成功呈现选项卡,但无法显示我的自定义元素 bps-device-container。这是我的 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>
使用 Chrome 开发者工具,我得到了以下信息:
即使我尝试更改样式标签中的尺寸,为什么高度仍然为 0?我尝试了各种方法,但无法显示页面。
解决方案
在这个问题上停留了一天半,结果是 attr-for-selected 属性导致了问题。我为 vaadin 选项卡和铁页删除了它,现在它工作正常。
推荐阅读
- python - 有没有办法从 pyspark 数据帧中编写一个 parquet 文件,而无需在创建 parquet 后自动排列行
- java - Micronaut:是否可以向 application.yml 写入值?
- tensorflow - 量化感知训练 Tensorflow 对象检测 API
- azure-logic-apps - 让 Azure 逻辑应用在未来运行,不再重复
- networking - 我可以从本地网络中的 ip 和 mac 地址收集哪些类型的信息?
- ubuntu - 如何为 Jetson Nano 设置静态 IP?
- selenium - Selenium - 点击 Google 中的图片
- c++ - 为什么 Visual Studio 找不到 soundio.h?
- mysql - Aurora MySQL 5.6 无服务器触发器不起作用
- ruby-on-rails - 为关系指定自定义序列化程序 has_one json-api-rb