gpt4 book ai didi

polymer - 带有 polymer 入门套件的自定义元素中的铁列表

转载 作者:行者123 更新时间:2023-12-05 01:30:56 27 4
gpt4 key购买 nike

我正在使用 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>

这是有效的,因为如果我为我的 iron-list 提供合适的类,我可以看到我的列表正在填充。唯一的问题是我的列表将呈现在我的主应用程序标题下(这是有道理的,因为我的列表布局合适)。

此外,如果我将列表放在单个 html 文件中,该列表与标题一起工作得很好,正如您在 iron-list 官方演示页面中看到的那样。

现在我想将我的列表保存在外部 dom 模块中,但我需要它与 polymer 初学者工具包的单页应用场景中页面的其他元素无缝协作。

编辑:这是我的 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-pagessection 和我的自定义 dom-module。该列表无法与标题高度交互,也无法与其无缝滚动。

最佳答案

在早期版本的 polymer 中,您必须将列表的 scrollTarget 绑定(bind)到标题面板的滚动条。 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com