polymer - 带有 polymer 入门工具包的定制元素内的铁表

我正在使用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文件中，则该列表可以与标头一起使用，如铁清单官方演示页面所示。

现在，我想将列表保存在一个外部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。该列表不能与标题高度交互，也不能与其无缝滚动。

最佳答案

在聚合物的早期版本中，必须将列表的scrollTarget绑定到标题面板的滚动器。 Polymer 0.5 video @ 11：58中有关于此的幻灯片。在这种情况下，Polymer 1.0中的更新代码可能类似于：

<paper-scroll-header-panel id="hPanel" main condenses keep-condensed-header>
    <iron-list id="list" items="{{data}}" as="item" >
    ...
    </iron-list>
</paper-scroll-header-panel>

脚本：

document.querySelector("#list").scrollTarget = document.querySelector("#hPanel").scroller;

注意：我尚未对此进行测试，但认为目前可能会帮助您指出正确的方向。

关于polymer - 带有 polymer 入门工具包的定制元素内的铁表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31786299/