Знаете ли вы, что вам не всегда нужно загружать шаблон по умолчанию, который поставляется с вашим маршрутом/компонентом в 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://emberjs.com/api/ember/2.15.0/classes/Ember.Route/methods/renderTemplate?anchor=render&show=inherited%2Cprotected%2Cprivate%2Cdeprecated

https://guides.emberjs.com/v2.15.0/routing/rendering-a-template/