我正在学习如何使用Polymer。我使用Polymer提供的示例应用程序并尝试逐步扩展它。我正面临核心页面元素的问题。我创建了3页。我的每个页面都包含相同的自定义元素。我经历了一种奇怪的行为。仅呈现我的自定义元素的最后一个实例。在我的示例中,只渲染了第三页的一个。如果我将其删除,则只会呈现第二页中的一个。
知道发生了什么以及如何解决这个问题?
以下是我的网页的源代码:
<core-scaffold id="myapp" mode="waterfall">
<div tool flex >My first app</div>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Options</core-toolbar>
<core-menu theme="core-light-theme" selected="all" on-core-select="{{selectAction}}">
<core-item name="all" icon="settings" label="All"></core-item>
<core-item name="favorites" icon="account-box" label="Favorites"></core-item>
<core-item name="page2" icon="account-box" label="2nd page"></core-item>
<core-item name="page3" icon="account-box" label="3rd page fav"></core-item>
</core-menu>
</core-header-panel>
<div class="container" flex layout vertical center>
<core-pages flex class="pages" selected="{{page}}" transitions="slide-from-right" fit>
<div flex layout vertical center>
<div><h1>Page 1</h1>
</br>
<post-list id="AllPosts" show="all"></post-list>
<h1>End Page 1</h1>
</div>
</div>
<div flex layout vertical center>
<div>Page 2</div>
</br>
<div>
<post-list id="AllPosts2" show="all"></post-list>
</div>
<div>End Page 2</div>
</div>
<div flex layout vertical center>
<div>Page 3</div>
<div>
<post-list id="AllPosts3" show="all"></post-list>
</div>
<div>End Page 3</div>
</div>
</core-pages>
</div>
</core-scaffold>
这是我的自定义元素源代码:
<app-db id="db"></app-db>
<div layout vertical center>
<template repeat="{{oneuser in $.db.posts}}">
<post-card favorite="false" hidden="false" username="toto"></post-card>
<post-card favorite="{{oneuser.doc.favorite}}" on-favorite-tap="{{handleFavorite}}"
hidden?="{{show == 'favorites' && !oneuser.doc.favorite}}"
userimage="{{oneuser.doc.avatar}}" username="{{oneuser.doc.username}}" usermsg="{{oneuser.doc.text}}">
</post-card>
</template>
</div>