Ember.js Custom rendering template
Did you know that you don’t always have to load the default template that comes with your route/component in Ember? I did not until I explored with loading substate templates, which you can check out here from my other post.
Today, I will be showing how you can load your own custom template by using Ember’s built in render template functionality!
// 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>
So what we have here is a simple button that will call on the renderLoading() action when it is clicked, which will render a loading template, loading.hbs, that we will create and return a promise. Once that promise resolves, it will render the original route template. It is important to note that in order to trigger the loading template, you need to return a promise.
I would recommend reading my other post about loading templates to understand where the loading template, loading.hbs , comes from.
You can do a lot with this! For example, when a user scrolls into view of a component, it will render the loading template with a spinner to let the user know that the component is rendering and the application is not frozen.
Check out these resources on rendering templates on Ember guides and go forth and create cool loading templates for your applications!
Resources:
https://guides.emberjs.com/v2.15.0/routing/rendering-a-template/
