A global messaging system in Ember.js should be simple, but when navigating between controllers and updating templates, it can quickly become confusing. Creating global alert messages doesn’t have to be confusing though. Thinking it through and setting it up right can save you tons of time as you build your app.
All these instructions assume you are using ember-cli. If you aren’t, you should be!
First you need to start by creating an initializer which will create the interface for interacting with your application messages. The initializer will then inject the interface into the Ember application objects for use.
Now comes the fun part. In order for this to be used in your app (most likely a template) we are going to create two components.
Each of these components has a matching template for rendering the data into HTML.
The final step to using this would simple be to include it in your application somewhere. Really, you can place this anywhere.
Because we registered our alerts interface above on the route and controller objects, we can simply use it anywhere in those objects. Adding an alert to the stack is as simple as…
It’s really that easy! Adding this alerts interface and registering it across your application can really save you some time. If you would like to save even more time and have your alerts be automatically cleared when navigating within your application, you can add the following to your router.