当我的自定义元素在core-animated-pages中时,我有一个core-list元素的渲染问题(没有渲染)
这是一个jsfiddle工作时(灰名单)==>专辑网格外核心动画页面
http://jsfiddle.net/flagadajones/yq30u78d/
当id不起作用时,这里是一个jsfiddle(没有灰名单)==>专辑网格内核心动画页面
http://jsfiddle.net/flagadajones/m87sd0x3/2//
你能帮我谢谢吗
这是我的代码：
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js">
</script>
<link href="https://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html" rel="import">
<link href="https://www.polymer-project.org/components/core-icons/core-icons.html" rel="import">
<link href="https://www.polymer-project.org/components/core-icon-button/core-icon-button.html" rel="import">
<link href="https://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html" rel="import">
<link href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html" rel="import">
<link href="https://www.polymer-project.org/components/core-list/core-list.html" rel="import" >
<style>
html,body {
margin: 0;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
}
remote-app{
display: block;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body fit>
<remote-app ></remote-app>
<polymer-element name="album-detail" attributes="album" layout vertical>
<template>
<style>
#details {
width: 740px;
margin: auto;
height: 100%;
Box-shadow: 0 27px 24px 0 rgba(0,0.6);
poosition:relative;
}
.mycard {
height: 540px;
border-radius: 3px;
text-align: start;
overflow: hidden;
background: #fff;
Box-shadow: 0 6px 20px 0 rgba(0,0.19);
}
.card-left {
width: 200px;
height: 200px;
background-color:blue;
}
.btn{
background-color:red;
height:63px;
}
.title{
background-color:yellow;
color:black;
}
.info{
height:200px
}
.item{
height:48px;
color:black;
background-color:grey;
}
</style>
<section id="details" class="details" >
<div class="mycard " layout vertical>
<div layout horizontal>
<div class="card-left" ></div>
<div flex auto-horizontal layout vertical class="info">
<div layout vertical flex class="title">
<div flex auto>title</div>
<div flex auto>title2</div>
</div>
<div layout horizontal >
<a flex class="btn">aaa</a>
<a flex class="btn">bbb</a>
<a flex class="btn">ccc</a>
</div>
</div>
</div>
<core-list id="list3" data="{{album.pistes}}" height="48" flex>
<template>
<div layout horizontal class="item" center>
<div>{{index}} toto {{model.name}}</div>
</div>
</template>
</core-list>
</div>
</section>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
<polymer-element name="remote-app" layout vertical>
<template>
<style>
[drawer] {
background-color: #B99588;
border-right: 1px solid #ccc;
}
[main] {
background-color: #4F7DC9;
height:100%;
}
:host {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.album-grid {
display: block;
height: 100%;
width: 100%;
margin: 0 auto;
}
#pages {
display: block;
height: 100%;
margin: 0 auto;
}
.item{
height:48px;
color:black;
background-color:grey;
}
</style>
<core-drawer-panel>
<div drawer>
</div>
<div main>
<album-detail album="{{ele}}" flex/>
<!--core-animated-pages id="pages" selected="0" >
<album-detail album="{{ele}}" />
</core-animated-pages-->
</div>
</core-drawer-panel>
</template>
<script>
Polymer({
ele:{pistes:[{name:"1"},{name:"2"},{name:"3"},{name:"4"}]}
}
);
</script>
</polymer-element>
解决方法
Kevin Schaaf帮助我解决了这个问题.请看这
thread.
请注意,您首先需要从凉亭获得最新版本的Polymer(目前为5.2).然后转到core-animated-pages.html并找到这段代码 –
if (!oldItem) {
this.applySelection(this.selectedItem,true);
return;
}
现在添加this.async(this.notifyResize);申请后选择 –
if (!oldItem) {
this.applySelection(this.selectedItem,true);
this.async(this.notifyResize);
return;
}
而已！您的代码应该在不调用updateSize或任何其他技巧的情况下工作.
我认为在5.2之后,这个修复程序将被包含在包中,因此您不需要这样做.但就目前而言,这只是你需要做的简单改变.
