聚合物入門套件中的自定義元素鐵列表

我使用聚合物入門套件作爲應用程序的基礎。因此，這是一個包含路由到特定部分的單頁應用程序。我的指數基本沒變，你可以在這裏看到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不起作用。該列表無法與標題高度進行交互，也不會與其無縫滾動。

來源

2015-08-03 filipp8

你是否在你的iron-list中使用'class =「fit」'？ –

你也可以澄清Q或問題是什麼 - 它純粹是佈局問題，還是當你使它成爲一個單獨的dom模塊時，有沒有與腳本一起工作？ –

嗨，感謝您的關注，我編輯了我的Q索引版面和更多解釋。希望現在更清楚。 – filipp8

在早期版本的聚合物中，您必須將列表的scrollTarget綁定到標題面板的滾動條。有關於此的幻燈片在Polymer 0.5 video @ 11：58。在這種情況下，在聚合物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;

注：我沒有測試，但還沒有想通這可能有助於你指出現在正確的方向。

來源

2015-08-20 19:14:49

不幸的是，這是行不通的，至少在我的佈局。我已經多次嘗試將正確的scrollTarget分配給我的列表，但都無濟於事。 – filipp8

聚合物入門套件中的自定義元素鐵列表

回答

相關問題