Ajax 聚合物铁清单仅装载20件

我有一个测试数组，我正在从iron ajax检索，其中包含大约1000个项目。我将该返回数组设置为自定义聚合元素的people属性。Iron list显示了前20个结果，但当我向下滚动时，其余的结果没有被加载

<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/iron-list/iron-list.html">
<link rel="import" href="/bower_components/iron-flex-layout/classes/iron-flex-layout.html">

<dom-module id="people-list">
    <template>
        <iron-list items="[[people]]" as="item" class="flex">
            <template>
                <div style="background-color:white; min-height:50px;">[[item.city]]</div>
            </template>
        </iron-list>
        <iron-ajax 
            auto
            id="ajaxPeopleList"
            method="POST"
            url="/people/list"
            handle-as="json"
            last-response="{{people}}">
        </iron-ajax>
    </template>
    <script>
        Polymer({
            is: 'people-list',
            properties: {
                people: {
                    type: Array
                }
            }
        });
    </script>
</dom-module>

我认为这可能与screen/ironlist元素的高度有关，但我被卡住了，不知道如何继续

---

如果我以像素为单位设置铁名单元素的高度，我可以加载所有项目。但我只想让它适合屏幕。文档使它看起来像是可以使用iron flex布局和类flex，这是我在示例代码中尝试做的，但没有效果。

这是因为没有启动iron resize事件来告诉iron list重新绘制项目。根据文件：

调整大小 iron list在通过iron resize事件接收到通知时显示项目。此事件由实现IronResizebleBehavior的任何元素触发

默认情况下，熨斗页、纸张选项卡或纸张对话框等元素将自动触发此事件。如果手动隐藏列表，例如使用display:none，则可能希望在列表再次可见后立即实施IronResizebleBehavior或手动触发此事件。e、 g

查询选择器'iron-list'。激发'iron-resize'

我已将以下内容添加到您的代码中，这可能有点像黑客，并使其正常工作：

ready: function () {
  document.addEventListener("scroll", function () {
    // fire iron-resize event to trigger redraw of iron-list
    document.querySelector('iron-list').fire('iron-resize');
  });
}

---

这是因为没有任何东西触发熨斗调整大小事件来告诉熨斗列表重新绘制项目。根据文件：

调整大小 iron list在通过iron resize事件接收到通知时显示项目。此事件由实现IronResizebleBehavior的任何元素触发

默认情况下，熨斗页、纸张选项卡或纸张对话框等元素将自动触发此事件。如果手动隐藏列表，例如使用display:none，则可能希望在列表再次可见后立即实施IronResizebleBehavior或手动触发此事件。e、 g

查询选择器'iron-list'。激发'iron-resize'

我已将以下内容添加到您的代码中，这可能有点像黑客，并使其正常工作：

ready: function () {
  document.addEventListener("scroll", function () {
    // fire iron-resize event to trigger redraw of iron-list
    document.querySelector('iron-list').fire('iron-resize');
  });
}

---

本·托马斯是对的。您将获得json元素，但它不会显示，因为铁名单需要重新绘制。因为我有同样的问题，我去谷歌聚合物网站，找到了代码示例

简而言之，您的示例：

<script>
// Only execute after DOM and imports (in our case the json file) has been loaded
HTMLImports.whenReady(function() {
  Polymer({
     is: 'people-list',
     properties: {
         people: {
             type: Array
         }
     },
    attached: function() {
      // Use the top-level document element as scrolltarget
      this.$.list.scrollTarget = this.ownerDocument.documentElement;
    }
  });
});

---

本·托马斯是对的。您将获得json元素，但它不会显示，因为铁名单需要重新绘制。因为我有同样的问题，我去谷歌聚合物网站，找到了代码示例

简而言之，您的示例：

<script>
// Only execute after DOM and imports (in our case the json file) has been loaded
HTMLImports.whenReady(function() {
  Polymer({
     is: 'people-list',
     properties: {
         people: {
             type: Array
         }
     },
    attached: function() {
      // Use the top-level document element as scrolltarget
      this.$.list.scrollTarget = this.ownerDocument.documentElement;
    }
  });
});

---

将您的代码与此处的演示代码进行比较。尝试将iron list中的class=flex更改为class=layout Vertical，但这无助于将您的代码与此处的演示代码进行比较。尝试将iron list中的class=flex更改为class=layout Vertical，但这没有帮助