Ember js, show spinner, когда что-то загружается в фоновом режиме

Question

Есть ли способ с EmberJS показать шаблон загрузки где-нибудь, когда что-то на моей странице что-то загружает?

Например, у меня есть страница с множеством исполнителей песен, и у каждого из них много песен. Я загружаю страницу художников, и хорошо, но в фоновом режиме я загружаю информацию о песнях всех. Мне просто нужен сканер для загрузки где-то, который говорит мне, что сайт загружает что-то (например, на вкладке «Сеть» в Chrome Developer Tools что-то ждет ...)

как это сделать в таком элегантный способ Emberjs?

Answer 1

Насколько я знаю (и основанный на быстром прочтении из API Docs) Ember не обеспечивает встроенный способ добиться этого. Если я ошибаюсь, это означает, что вам нужно будет выполнить отслеживание состояния запроса самостоятельно.

Вы можете сделать это в слое адаптера Ember (например, добавить код в app/adapters/application.js), но самым простым решением может быть просто работа с jQuery напрямую. Есть несколько API, вы можете использовать:

• jQuery.active, который указывает количество невыполненных запросов
• ajaxStart и ajaxStop

Я бы рекомендовал Создание Ember.Service для отслеживания этого state-- затем вы можете ввести его в любой контроллер или компонент, который должен отображать шаблон на основе этой информации. Ваша служба может выглядеть следующим образом:

import Ember from 'ember'; 

export default Ember.Service.extend({ 

    init() { 
    this._super(...arguments); 
    const invalidateRequestInProgress =() => { 
     this.notifyPropertyChange('dummyProperty'); 
    } 

    $(document).ajaxStart(invalidateRequestInProgress); 
    $(document).ajaxStop(invalidateRequestInProgress); 
    }, 

    requestInProgress: Ember.computed('dummyProperty', function() { 
    return Ember.$.active !== 0; 
    }), 

}); 

Я не проверял этот код, так что я не уверен, что это будет работать на практике :)

Answer 2

Вы можете наблюдать isPending свойство Ember.PROMISEPROXYMIXIN так:

{{#if artist.songs.isPending}} 
    loading... 
{{/if}}