Polymer Dart - 当 core-list-dart 填充了加载微调器的数据时，我如何阅读？答案

【问题标题】：Polymer Dart - How can I read when core-list-dart is populated with data for a loading spinner?Polymer Dart - 当 core-list-dart 填充了加载微调器的数据时，我如何阅读？
【发布时间】：2015-06-12 16:48:01
【问题描述】：

飞镖和聚合物飞镖。

我在我的程序中使用了许多 core-list-dart 列表，这些列表在页面更改时填充数据（使用核心页面）。我发现即使 core-list-dart 的填充速度比使用 <template repeat="...> 快得多，但在切换到新页面时仍然会导致几秒钟的延迟（如果有足够的数据，最多会延迟 8 秒）。

很好。我知道我使用的是 beta 版的聚合物（因此也使用了 Polymer Dart），而且速度会慢一些。因此，为了最终用户的理智，我想在更改页面时放置一个加载微调器。我可以使用期货来检查填充正在使用的列表的数据，但这并不是真正发生延迟的地方。列表填充数据，微调器消失，然后延迟开始，而 core-list-dart 显然是在循环遍历列表或其他东西。

我如何（或者我什至可以）如何处理保持加载指示（在我的情况下是微调器 - 特别是纸微调器），直到带有 core-list-dart 的数据就位并准备好显示。

这里是一个具体的html代码示例：

<core-list-dart id="list1" class="{{listclass}}" data="{{tierOne}}" grid="true" width="150">
  <template>
    <div index="{{index}}" class="{{ {'strike': model.cleared} }} ringcontainer">
      <img _src="../../../web/images/rings/thumbnails/{{model.image}}" class="{{ {'strike': model.cleared} }} ringimagethumb" data-sku="{{model.SKU}}" data-finish="{{model.finish}}" on-click="{{zoomRing}}"/>
      <core-selector theme="core-light-theme" on-core-select="{{removeRing}}" multi>
        <core-item icon="{{model.icon}}" data-sku="{{model.SKU}}" data-finish="{{model.finish}}" class="{{ {'strike': model.cleared} }} ringdata">{{model.added}}</core-item>
      </core-selector>
      <div index="{{index}}" class="{{ {'strike': model.cleared} }} ringdata">Category: {{model.category}}</div>
      <div index="{{index}}" class="{{ {'strike': model.cleared} }} ringdata">SKU: {{model.SKU}}</div>
      <div index="{{index}}" class="{{ {'strike': model.cleared} }} ringdata">Finish: {{model.finish}}</div>
      <div index="{{index}}" class="{{ {'strike': model.cleared} }} ringdata">${{model.price}}</div>
      <div index="{{index}}" class="{{ {'strike': model.cleared} }} ringdata">(tier{{model.tier}}-id{{model.id}})</div>
    </div>
  </template>
</core-list-dart>

这一切都在 core-pages 标记内，当所选页面更改为该部分时，这是填充列表的代码（初始化为 @observable List tierOne = toObservable([]);）环，显然是我使用的自定义类和 tierData 是包含所有数据的环列表。

tierOne = tierData.where((Ring element) => element.tier == 1).toList();

这一切都很好。但它缓慢——尤其是在该应用在现场使用的平板电脑上运行时。

当然，我只是假设延迟与 core-list-dart 相关 -- 因为 core-pages 会很快交换。

谢谢

【问题讨论】：

标签： list dart polymer core

【解决方案1】：

我没有尝试过使用 core-list-dart，但通常你会使用 unresolved 类。

https://www.polymer-project.org/0.5/docs/polymer/styling.html#fouc-prevention

类似（未测试）：

<style>
  #spinner {
    opacity: 100;
    position: absolute;
  }
  body[unresolved] #spinner {
    opacity: 0;
  }
</style>
<body unresolved> 
  <img id="spinner" src=spinner.gif>
  <core-list-dart></core-list-dart>
</body>

【讨论】：