Полимер async не работает в FireFox

Question

Неужели кто-нибудь сталкивается с проблемами с вызовом асинхронного полимера в FireFox? Мой сайт хорошо работает в последней версии Chrome, но не так много удачи в FireFox. Одной из первых вещей, которые должен предпринять сайт, является извлечение некоторых коллекций объектов из базы данных (через API-интерфейс core-ajax/REST). Сразу же после вызова функций, необходимых для извлечения коллекций, я вызываю функцию, которая асинхронно заполняет локальные переменные хранилища с результирующими наборами из различных элементов данных, которые вызывают вызовы ajax и обрабатывают ответы. FireFox вызывает функцию populateLocalStorage, указанную в качестве аргумента для вызова async, но в отличие от Chrome, вызов происходит до того, как элементы источника данных получили свои ответы ajax и обработали их соответствующим образом. Поэтому «_bugs» и «_snakes» (в этом примере) заканчиваются как неопределенные. Вот сценарий отрывок из полимерного элемента вопроса:

<script> 

    Polymer('my-app-index', { 

     bugs: null, 
     snakes: null, 
     spiders: null, 

     ready: function() {     
      this.retrieveCollections(); 
     }, 

     retrieveCollections: function() { 
      // custom datasource elements that make necessary ajax call(s) 
      // (using core-ajax), and handle ajax responses appropriately 
      // This element accesses the resulting collections via 2 way databinding 
      // to the datasource(s) element attributes 
      this.$.bugsDS.getAll(); 
      this.$.snakesDS.getAll(); 
      this.$.spidersDS.getAll(); 

      this.async(this.populateLocalStorage); // Populate local storage with resulting collections 
     }, 

     populateLocalStorage: function() { 
      mynamespace._bugs = this.bugs; 
      mynamespace._snakes = this.snakes; 
     } 
    }); 

</script> 

Answer 1

Если каждый getAll() выполняет запрос асинхронного АЯКСА, это крайне маловероятно, все не закончат в одном RAF (16.66ms). Вот что делает this.async(). Этот обратный вызов называется одним requestAnimationFrame.

Вместо этого вы хотите отреагировать на изменение массивов. Всякий раз, когда они заселить свои соответствующие массивы, вы можете установить локальное хранилище:

retrieveCollections: function() { 
    this.$.bugsDS.getAll(); 
    this.$.snakesDS.getAll(); 
    this.$.spidersDS.getAll(); 
}, 

bugsChanged: function() { 
    this.populateLocalStorage('_bugs', this.bugs); 
}, 

snakesChanged: function() { 
    this.populateLocalStorage('_snakes', this.snakes); 
}, 

populateLocalStorage: function (key, data) { 
    mynamespace[key] = data; 
} 

В качестве альтернативы, вы можете настроить учетную observe блока и обрабатывать оба свойство изменяющегося с одной функцией:

observe: { 
    'bugs snakes': 'populateLocalStorage' 
}