Polymer 带有聚合物起动器套件的定制元件内的铁清单_Polymer_Polymer 1.0_Polymer Starter Kit

Polymer 带有聚合物起动器套件的定制元件内的铁清单

polymer

Polymer 带有聚合物起动器套件的定制元件内的铁清单,polymer,polymer-1.0,polymer-starter-kit,Polymer,Polymer 1.0,Polymer Starter Kit,我正在使用聚合物初学者工具包作为应用程序的基础。所以，这是一个单页应用程序，路由到特定的部分。我的索引基本上没有变化，你可以在这里看到现在我有了我的自定义元素 <dom-module id="lista-contatti"> <template> <iron-ajax url="../../api/get_contacts.php" last-response="{{data}}" auto></iron-ajax>

我正在使用聚合物初学者工具包作为应用程序的基础。所以，这是一个单页应用程序，路由到特定的部分。我的索引基本上没有变化，你可以在这里看到

现在我有了我的自定义元素

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


[[item.tipo]]

这是有效的，因为如果我给我的铁名单一个合适的类，我可以看到我的名单填充。唯一的问题是，我的列表将呈现在我的主应用程序标题下（这是有意义的，因为我的列表具有合适的布局）

此外，如果我将列表放在一个html文件中，它的标题效果也很好，正如您在iron list官方演示页面中看到的那样

现在我想将我的列表保存在一个外部dom模块中，但我需要它在polymer starter kit的单页应用程序场景中与页面的其他元素无缝协作

编辑：这是我的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>


... 
... 
... 
...

我的<代码>熨斗列表与<代码>纸质卷轴标题面板一起无法正常工作，因为它嵌套在许多元素中，如<代码>熨斗页面、<代码>部分和我的自定义<代码>dom模块。列表无法与页眉高度交互，也无法与页眉高度无缝滚动。

在早期版本的polymer中，您必须将列表的滚动目标绑定到页眉面板的滚动条。在@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>

注意：我还没有测试过这个问题，但我认为现在它可能会帮助您找到正确的方向。

您是否在铁名单中使用了

class=“fit”

？您能否澄清问题所在？是纯粹的布局问题，还是当您将脚本作为单独的dom模块时，它有什么不起作用的地方？您好，感谢您的关注，我用索引布局和更多解释编辑了我的Q。希望现在更清楚了。你有没有想过？我想我也有同样的问题不幸的是，这不起作用，至少在我的布局中是这样。我已经多次尝试将正确的scrollTarget分配给我的列表，但都没有成功。

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