3

アプリのベースとして 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 の公式デモ ページでわかるように、リストを 1 つの html ファイルに配置すると、ヘッダーでうまく機能します。

ここで、リストを外部の dom-module に保持したいと考えていますが、ポリマー スターター キットの単一ページ アプリ シナリオで、ページの他の要素とシームレスに連携する必要があります。

編集: これは私の index.html 1 ページのアプリ レイアウトです。

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

Myは、や my customなどの多くの要素内にネストされているためiron-list、期待どおりに機能しません。リストはヘッダーの高さと対話できず、シームレスにスクロールしません。paper-scroll-header-paneliron-pagessectiondom-module

4

1 に答える 1

0

以前のバージョンの Polymer では、リストの scrollTarget をヘッダー パネルのスクローラーにバインドする必要がありました。これに関するスライドは、Polymer 0.5 ビデオ@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;

注意: 私はまだこれをテストしていませんが、今のところ正しい方向に向けるのに役立つかもしれないと考えました.

于 2015-08-20T19:14:49.593 に答える