javascript - 链接到模板的 polymer 非阻塞异步函数

Question

我有模板

<core-list data="{{ list }}" height="80">
    <template>
        <app-list-item transaction="{{ transaction }}"></app-list-item>
    </template>
</core-list>

以及设置this.list数据的js部分

# Polymer("app-list", {

ready: function() {
    this.list = null;
},
activeChanged: function(oldValue, isActive) {
    if (isActive == "1") {
        this.initialize();
    }
},
initialize: function() {
    var response = this.fetchListData();
    this.list = response.data;
}

当使用 attributeChangedCallback() 激活模板元素时，我可以触发 initialize() (点击按钮)

我使用 XMLHttpRequest() 从外部 API 获取 this.list 数据，并且此请求需要时间。

因此，当我按下按钮激活我的元素应用程序时， View 会卡住几秒钟。

有没有办法创建某种回调方法，仅在 API 数据到达时才会填充 this.list？在此之前，this.list 应保持为 null。

Answer 1

执行此操作的一个好方法是使用 <core-ajax> :

<core-ajax auto url="http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json" handleAs="json" response="{{list}}"></core-ajax>
<core-list data="{{ list.feed.entry }}" height="80">
  <template>
    <div>{{title.$t}}</div>
  </template>
</core-list>

演示:http://jsbin.com/nasibiqe/1/edit

auto属性告诉 core-ajax 在元素准备好后立即发出请求。然后，我们数据绑定(bind) core-list 的 data属性为ajax的response属性。仅当数据可用时才会填充列表。如果您想在按下按钮时发出 XHR 请求，请删除 auto属性:

<core-ajax id="ajax" url="..." handleAs="json" response="{{list}}"></core-ajax>
<button on-click="{{go}}">Go</button>

go: function() {
  this.$.ajax.go();
}

演示:http://jsbin.com/giwujija/1/edit