Блог

У меня есть шаблон

 <core-list data="{{ list }}" height="80">
    <template>
        <app-list-item transaction="{{ transaction }}"></app-list-item>
    </template>
</core-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;
}
  

Я могу запускать, initialize() когда элемент шаблона активируется с помощью attributeChangedCallback() (нажатием кнопки)

Я получаю this.list данные из внешнего API с помощью XMLHttpRequest() , и этот запрос требует времени.

Итак, когда я нажимаю кнопку для активации моего элемента, приложение зависает на несколько секунд просмотра.

Есть ли способ создать какой-то метод обратного вызова, который будет заполнять это.перечислять только после поступления данных API? До тех пор это.список должен оставаться нулевым.

Хороший способ сделать это с <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 выполнить запрос, как только элемент будет готов. Затем мы привязываем data атрибут core-list к response атрибуту ajax с данными. Это заполняет список только при наличии данных. Если вместо этого вы хотите отправлять запрос XHR при нажатии кнопки, удалите auto attr:

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

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

Demo: http://jsbin.com/giwujija/1/edit