Polymer 核心页面中仅呈现一个聚合自定义元素实例

Polymer 核心页面中仅呈现一个聚合自定义元素实例,polymer,Polymer,我正在学习如何使用聚合物。我使用聚合物提供的示例应用程序,并尝试逐步扩展它。我面临着核心页面元素的问题。我创建了3页。我的每个页面都包含相同的自定义元素。我经历了一种奇怪的行为。仅呈现自定义元素的最后一个实例。在我的示例中,仅呈现第3页中的一个。如果我删除它,则只呈现第2页中的一页 知道发生了什么以及如何解决这个问题吗 以下是我的页面的源代码: <core-scaffold id="myapp" mode="waterfall"> <div tool flex >

我正在学习如何使用聚合物。我使用聚合物提供的示例应用程序,并尝试逐步扩展它。我面临着核心页面元素的问题。我创建了3页。我的每个页面都包含相同的自定义元素。我经历了一种奇怪的行为。仅呈现自定义元素的最后一个实例。在我的示例中,仅呈现第3页中的一个。如果我删除它,则只呈现第2页中的一页

知道发生了什么以及如何解决这个问题吗

以下是我的页面的源代码:

<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>

我的第一个应用程序
选择权
第1页

第1页结束 第2页
第2页结束 第3页 第3页结束
以下是我的自定义元素源代码:

    <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>


如果您想进行转换,似乎应该使用
核心动画页面
而不是
核心页面
。不要忘记也导入转换
bower\u组件/core动画页面/transitions/slide from right.html
。告诉我它对渲染是否有帮助。如果它不起作用,我认为问题在于你的聚合物布局。更多信息,谢谢Thibaut的帮助。事实上,我最初使用的是核心动画页面,我也有同样的行为。我会看一看聚合物的布局,我做到了。没有改善。如果我查看元素,我只能在第一页的重复模板后看到一个#文档片段。在最后一个示例中,我可以看到基于数据库内容的多个卡片自定义元素。它的行为就像我的db数据在我的最后一页上使用过,但在前两页中不再可用。也许是数据绑定?