Я использую Polymer Starter Kit в качестве основы для приложения. Итак, это одностраничное приложение с маршрутизацией в определенный раздел. Мой индекс практически не изменился, вы можете увидеть его здесь 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. Список не может взаимодействовать с высотой заголовка и не может плавно прокручиваться вместе с ним.
