Знаете ли вы, что вам не всегда нужно загружать шаблон по умолчанию, который поставляется с вашим маршрутом/компонентом в Ember? Я этого не делал, пока не изучил загрузку шаблонов подсостояний, которые вы можете посмотреть здесь в другом моем посте.
Сегодня я покажу, как вы можете загрузить свой собственный шаблон, используя встроенную в Ember функцию шаблона рендеринга!
// js import Ember from 'ember'
export default Ember.Route.extend({ actions: { renderLoading() { this.render(‘loading’) let promise = new Promise(function(resolve, reject) { // on success Ember.run.later(this, function() { resolve({}); }, 3000); }); promise.then(() => { this.render() }) }, } });
// html <button {{action 'renderLoading'}}>Render Component</button>
Итак, у нас есть простая кнопка, которая при нажатии вызывает действие renderLoading()
, которое отображает шаблон загрузки loading.hbs
, который мы создадим и вернем обещание. Как только это обещание будет разрешено, он отобразит исходный шаблон маршрута. Важно отметить, что для запуска шаблона загрузки необходимо вернуть обещание.
Я бы порекомендовал прочитать мой другой пост о загрузке шаблонов, чтобы понять, откуда берется шаблон загрузки, loading.hbs
.
Вы можете многое сделать с этим! Например, когда пользователь прокручивает представление компонента, он отображает шаблон загрузки с помощью счетчика, чтобы пользователь знал, что компонент отображается, а приложение не заморожено.
Ознакомьтесь с этими ресурсами по шаблонам рендеринга в руководствах Ember и создайте классные загрузочные шаблоны для своих приложений!
Ресурсы:
https://guides.emberjs.com/v2.15.0/routing/rendering-a-template/