Question

我正在尝试将Polymer的核心列表与来自core-ajax源的数据一起使用。我试过像：

<polymer-element name="my-list-test">
  <template>
    <core-ajax url="http://jsonplaceholder.typicode.com/comments" auto
               handleAs="json" 
               response="{{mydata}}"></core-ajax>

    <core-list data="{{mydata}}" class="mylist" flex>
       <template>
          <div layout horizontal>
             <div>{{model.id}} - {{model.email}} {{model.name}}</div>
          </div>
       </template>
    </core-list>
  </template>
  <script>
     Polymer({
     });
  </script>
</polymer-element>

我发现这部分有效。数据源有500个项目，但核心列表一次只显示12个项目。当我试图回去时，它会在到达第一个之前停止，通常在第23行。有人可以帮我解决这个问题吗？

感谢您的帮助

Answer 1

尝试了您的代码并获得了500个条目。你的代码有效。虽然当我尝试使用我的json文件（来自他们的REST API的推特趋势列表）时，我无法让它工作。如果你能解决它，请告诉我。我可以发给你那个非常json的文件。

Answer 2

在条件模板中扭曲核心列表：

 <template if='{{mydata}}'>
   <core-list data="{{mydata}}" class="mylist" flex>
    <template>
      <div layout horizontal>
         <div>{{model.id}} - {{model.email}} {{model.name}}</div>
      </div>
    </template>
   </core-list>
</template>

这是为了确保在数据绑定准备好之前不会创建核心列表元素。

Answer 3

这似乎是核心列表中的一个错误，这里有一点解决方法。当您将数组的index值绑定到某个东西时，此错误似乎消失了。

<template if='{{mydata}}'>
   <core-list data="{{mydata}}" class="mylist" flex>
    <template>
      <div layout horizontal>
         <div data-index={{index}}>{{model.id}} - {{model.email}} {{model.name}}</div>
      </div>
    </template>
   </core-list>
</template>

data-index是一个完全组成的属性，只是为了使用{{index}}变量。

请在Google下方观看此视频，说明此修复程序 https://www.youtube.com/watch?v=2UKPRbrw3Kk

链接到GitHub这个Bug的问题：
https://github.com/Polymer/core-list/issues/62

Answer 4

我认为你需要确保你拥有高度属性和高度。我遇到了和你一样的问题，并添加了这个修复它：

<core-list data="{{data}}" height="20" style="height:100%">

希望这有帮助。

具有核心-ajax数据的聚合物核心列表

4 个答案: