我使用聚合物入門套件作爲應用程序的基礎。 因此,這是一個包含路由到特定部分的單頁應用程序。 我的指數基本沒變,你可以在這裏看到https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html。聚合物入門套件中的自定義元素鐵列表
現在我這裏有
<dom-module id="lista-contatti">
<template>
<iron-ajax url="../../api/get_contacts.php" last-response="{{data}}" auto></iron-ajax>
<iron-list items="{{data}}" as="item" id="list">
<template>
<paper-icon-item>
<avatar class$="[[item.classe]]" item-icon></avatar>
<paper-item-body two-line>
<div><a href="{{computeLink(item.nome)}}"><span>[[item.nome]]</span> <span>[[item.cognome]]</span></a></div>
<div secondary><span>[[item.tipo]]</span></div>
</paper-item-body>
</paper-icon-item>
</template>
</iron-list>
</template>
</dom-module>
這工作,因爲如果我給一個合適的班級我的鐵名單,我可以看到我的列表填充我的自定義元素。唯一的問題是,我的列表將呈現在我的主應用程序標題下(並且由於適合我的列表的佈局,這是有意義的)。
另外,如果我把它放在一個單獨的html文件中,這個列表的工作效果非常好,正如你在iron-list官方演示頁面中看到的那樣。
現在我想將我的列表保留在外部dom模塊中,但是我需要它在聚合物入門工具包的單頁應用場景中與頁面的其他元素無縫協作。
編輯:這是我的index.html一個頁面佈局應用
<body>
<template is="dom-bind" id="app">
<paper-drawer-panel>
<paper-scroll-header-panel drawer fixed>
<paper-toolbar> ... </paper-toolbar>
<paper-menu> ... </paper-menu>
</paper-scroll-header-panel>
<paper-scroll-header-panel main condenses keep-condensed-header>
<paper-toolbar> ... </paper-toolbar>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="foo"> ... </section>
<section data-route="contact">
<!-- HERE IS MY DOM-MODULE -->
<lista-contatti></lista-contatti>
</section>
</iron-pages>
</paper-scroll-header-panel>
</paper-drawer-panel>
</template>
</body>
我iron-list
與paper-scroll-header-panel
預期的,因爲它嵌套很多元素裏面像iron-pages
,section
和我的自定義dom-module
不起作用。該列表無法與標題高度進行交互,也不會與其無縫滾動。
你是否在你的iron-list中使用'class =「fit」'? –
你也可以澄清Q或問題是什麼 - 它純粹是佈局問題,還是當你使它成爲一個單獨的dom模塊時,有沒有與腳本一起工作? –
嗨,感謝您的關注,我編輯了我的Q索引版面和更多解釋。希望現在更清楚。 – filipp8