在核心页面中只呈现一个Polymer自定义元素的实例

时间:2015-03-20 12:17:02

标签: polymer

我正在学习如何使用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>

0 个答案:

没有答案