Сегодня я расскажу о своем опыте и о том, что я узнал, реализовав загрузку подсостояний в Ember.js. Это очень удобный способ отображения состояний загрузки для обычных целей, таких как загрузка счетчиков или индикаторов выполнения.
Для начала нам нужно понять файловую структуру нашего проекта.
Я использовал Ember CLI для создания своего проекта, но в целом файловая структура вашего проекта должна выглядеть примерно так, как показано ниже (я исключаю файлы/папки, которые нам не нужны, но для получения дополнительной информации о том, что такое проект Ember CLI структура выглядит так, вы можете перейти к их руководству). В нашем исследовании нас интересует только папка templates.
// project structure
.
.
.
app
|_ templates
|_ styles
.
.
.
// templates folder
templates
|____ application.hbs
|____ routeName.hbs
or
|____ routeName
|__ routeName.hbs
|__ nestedRouteName.hbs
Надеюсь, вы, ребята, уже можете визуализировать структуру проекта. В основном мы собираемся сосредоточиться на шаблонах маршрутов в папке шаблонов.
Кроме того, прежде чем мы полностью углубимся, вы должны прочитать это руководство Ember по загрузке подсостояний и ссылаться на него всякий раз, когда вы запутались; это, безусловно, очень помогло мне, когда я сам проходил через все это. Кроме того, я настоятельно рекомендую прочитать Руководство Криса Болла по этой теме, прежде чем мы будем марать руки. Вы также должны иметь предварительные знания об обещаниях в JavaScript, чтобы понимать, как вызвать подсостояние загрузки.
Итак, допустим, вы хотите, чтобы ваш веб-сайт показывал состояние загрузки при первой загрузке. Это хорошая идея, потому что вы хотели бы уведомить пользователя о том, что ваш сайт не заморожен. Например, если я пытаюсь загрузить Instagram и вижу пустой белый экран, потому что он выполняет обещание получить данные из базы данных, я, скорее всего, не буду ждать, пока он загрузится, и перейду к одной из других моих социальных сетей. . Чтобы заставить вашего пользователя ждать, вам нужно создать подсостояние загрузки, создав loading.hbs или application-loading.hbs внутри папки шаблонов, потому что это будет шаблон загрузки по умолчанию, который отображается всякий раз, когда вы указываете, что должно быть подсостояние загрузки. Во всем этом посте мы будем называть этот шаблон загрузки по умолчанию application-loading.hbs.
Чтобы ваш загрузочный шаблон отобразился, любой из хуков beforeModel, model или afterModel должен возвращать обещание. Согласно руководству Ember по подсостояниям загрузки, существует действие загрузки, которое вы можете указать для дальнейшей настройки вашего подсостояния загрузки. Вы можете найти больше информации об этом в руководстве Ember по загрузке подсостояний.
Я использую обещание, созданное здесь, в качестве примера для этого поста. Если вы добавите это в любой из хуков, упомянутых выше, вы вызовете подсостояние загрузки. В шаблоне загрузки вы можете указать что угодно, чтобы показать пользователю, что ваш сайт загружается. Обычно у вас будет счетчик, указывающий на процесс загрузки.
import Ember from 'ember'export default Ember.Route.extend({ // in order to trigger the loading.hbs // return from store or Ember Data // or a promise model() { // in this case we'll just return a promise for simplicity's sake let promise = new Promise(function(resolve, reject) { // on success Ember.run.later(this, function() { // resolve anything here // again, for simplicity's sake // we will return a string resolve("test"); }, 3000);});return promise; } });// application-loading.hbs Website is Loading ...
это будет под индексным маршрутом.
Я решил вернуть обещание в хуке модели, но мы могли бы сделать это и в любом другом хуке, таком как beforeModel или afterModel.
Легко, верно? Хорошо, а что, если вы хотите загрузить счетчик для вложенных дочерних маршрутов? Ну, это тоже должно быть легко, и я покажу вам, как это сделать.
Для вложенных дочерних маршрутов мы можем либо использовать общий шаблон с именем loading.hbs в папке маршрута, аналогичный тому, который мы использовали для загрузки веб-сайта/приложения, либо мы можем настроить его для определенного маршрута.
Давайте создадим новый маршрут с именем parentRoute. Вы можете сделать это с помощью инструмента CLI, который я рекомендую, набрав в терминале в то время как в вашем каталоге проекта ember g route parentRoute (g просто сокращение от generate).
Возвращаясь к структуре папок выше, нам нужно будет добавить loading.hbs внутрь папки parentRoute, чтобы любой маршрут, загружаемый в parentRoute, отображал этот шаблон вместо application-loading.hbs.
Чтобы визуализировать структуру папок, у нас должно получиться что-то вроде этого:
// templates folder
templates
|____ application.hbs
|____ application-loading.hbs
|____ parentRoute
|__ parentRoute.hbs
|__ loading.hbs
Все идет нормально? Теперь мы установим промис на один из хуков beforeModel, model или afterModel в нашем parentRoute.hbs, чтобы он возвращал промис и запускал наш loading.hbs.
import Ember from 'ember'
export default Ember.Route.extend({
beforeModel() {
let promise = new Promise(function(resolve, reject) {
// on success
Ember.run.later(this, function() {
resolve("test");}, 3000);
});
return promise;
}
});
// templates/parentRoute/loading.hbs
parentRoute is Loading ...
Это в родительском маршруте.
После того, как вы это сделаете, вы увидите, что при первой загрузке приложения вы увидите рендеринг application-loading.hbs. И затем, когда вы перейдете к parentRoute, будет отображаться loading.hbs внутри parentRoute.
Чтобы загрузить определенный шаблон загрузки маршрута, все, что вам нужно сделать, это назвать шаблон таким образом, routeName-loading.hbs. Чтобы показать вам пример, давайте создадим маршрут с именем childRoute внутри parentRoute. Затем, если вы хотите загрузить другой и конкретный шаблон загрузки для childRoute, вы должны создать шаблон загрузки с именем childRoute-loading.hbs. Тогда ваша папка будет выглядеть примерно так:
// templates folder
templates
|____ application.hbs
|____ application-loading.hbs
|____ parentRoute
|__ parentRoute.hbs
|__ childRoute.hbs
|__ childRoute-loading.hbs
Как видите, в Ember есть простой и удобный способ создавать и отображать подсостояния загрузки для наших пользователей. Это также относится к подсостояниям ошибок, которые очень похожи по реализации. Должны заставить этих пользователей ждать наших красивых приложений!
