Как отобразить шаблон загрузки в Ember во время загрузки модели?

Question

Я хочу отобразить шаблон загрузки в Ember перед загрузкой следующего шаблона. Прямо сейчас у меня есть шаблон загрузки для маршрута приложения, и это отлично работает, если пользователь переходит непосредственно к URL-адресу. Тем не менее, я хочу, чтобы тот же шаблон отображался, если пользователь нажимает на link-to на страницу с другой страницы приложения. Как это может быть сделано?

Планирование afterRender не работает, потому что страница еще не загружена (сейчас она просто сидит на предыдущей странице в течение нескольких секунд при загрузке следующей страницы; использование afterRender вызывает одно и то же, однако один раз он загружает вас, чтобы получить краткий обзор загрузочного div до того, как он исчезнет: явно не предполагаемое поведение).

Как я могу показать шаблон загрузки?

Сокращение времени загрузки не является вариантом, мы делаем довольно тяжелые вычисления.

EDIT: Я действительно считаю, что мой вопрос отличается от того, который был предложен как дубликат, потому что я хочу иметь одинаковый шаблон загрузки для всех маршрутов, которые структура шаблона загрузки по умолчанию не предоставляет. «Наследственное» решение LoadingRoute больше не может работать, поскольку представления устарели с использованием новейшей версии Ember.

Answer 1

Из моего понимания, Ember.js loading substates это именно то, что вам нужно, особенно в этой части руководства:

приложение/router.js

Router.map(function() { 
    this.route('foo', function() { 
    this.route('bar', function() { 
     this.route('slow-model'); 
    }); 
    }); 
}); 

Ember будет чередовать пытается найти routeName загрузкой или загрузка шаблона в иерархии, начиная с первого шаблона:

• foo.bar.slow-модель заряжание

• foo.bar.loading или foo.bar загрузка

• foo.loading или Foo загрузка

• loading или application-loading (который вы уже внедрили)

Предлагаю удалить объект afterRender(), поскольку я не знаю, может ли он вмешиваться в запуск событий загрузки. Если гиды не предлагают решение, можете ли вы опубликовать jsfiddle? Ember.js может получить привередлив в зависимости от того, как вы реализуете розетки ...

Вы можете раскошелиться в example, который я создал для другого вопроса, чтобы быстро настроить ваш JSFiddle работать с ember.js