Now you have an action to set the flash-alert to display the appropriate message. You just need to pass the action some data. That data will be an object with keys for alertType and message.

The alertType will be a part of both the message and the style with Bootstrap alert variants: "success", "warning", "info", or "danger". Calling the action from a controller will look like this:

this.send('flash', {alertType: "success", message: "You Did It! Hooray!"});

You will be adding the call to the application action after creating a new sighting. In app/routes/sightings/new.js, add the following:

...
    create() {
      var self = this;
      this.get('sighting').save().then(function(data){
        self.send('flash', {alertType: "success", message: "New sighting."});
        self.transitionTo('sightings');
      });
...

Now navigate to create a new sighting by clicking the New Sighting button. Select a cryptid and a witness, type a new location, and click Save. Once the sighting is saved in the database, the app will route you to the list of sightings with a new flash message at the top of the list (Figure 25.5).

Figure 25.5  Flash alert – new sighting

The last step is adding the action and event that will remove the alert from the screen. You only want to show the flash-alert after you have created a new message, so you need to flip the switch to hide the alert when you remove it.

In app/controllers/application.js, add an action called removeAlert:

...
export default Ember.Controller.extend({

  alertMessage: null,
  alertType: null,
  isAlertShowing: false,
  actions: {
    removeAlert(){
      this.set('alertMessage', "");
      this.set('alertType', "success");
      this.set('isAlertShowing', false);
    }
 }
});

This will set isAlertShowing to false, set the alertMessage to an empty string, and set the alertType to "success".

Next, send the removeAlert action to the component. Add the following to app/templates/application.hbs:

...
</header>
<div class="container">
  {{#if isAlertShowing}}
    {{flash-alert message=alertMessage alertType=alertType}}
      close=(action "removeAlert")}}
  {{/if}}
  {{outlet}}
</div>

The syntax close=(action "removeAlert") probably looks weird. This is new to Ember 2.0 and is called a closure action. The function literal is passed through to be called from the component as an attribute named close, much like an alias.

Older versions of Ember had a more complex version of this flow. Closure actions are more than just functions passed from an object as an argument under the hood. To find out more about closure actions, visit the EmberJS blog post about the features for version 1.13 and 2.0 at emberjs.com/​blog/​2015/​06/​12/​ember-1-13-0-released.html.

Next, you need to call this action from the component. Components are instances of DOM elements; thus, they have key/value pairs representing DOM element events. You can add a declaration of a click event listener and Ember will add the listener to the <div> element wrapping the template. Add the following to app/components/flash-alert.js:

import Ember from 'ember';

export default Ember.Component.extend({
  ...
  typeTitle: Ember.computed('alertType', function() {
    return Ember.String.capitalize(this.get('alertType'));
  }),
  click() {
    this.get('close')();
  }
});

The property close, when called, will invoke the action "removeAlert" defined on the application controller. By using a closure action, you have assigned a component’s property to a function defined in the parent controller and tied the component’s functionality to the scope of its parent. You can add a flash-alert at any level and assign different functionality to close based on its context.

You have added a component that responds to data going down to customize the component and to actions going up to set the external state of the component from the parent controller. This the lifecycle of a component: data down, actions up. Keep this pattern in mind when creating components.

Throughout the Application Architecture chapters you have learned about the structure of modern applications built with Ember. You have learned about the patterns of MVC and how this framework helps you separate concerns with pre-built JavaScript objects. It also helps you maintain sanity with naming patterns, scaffolding, build tools, and conventions. From here you can feel confident creating a new app with ember new. You can dive straight into your application needs modeling data, creating routes, and building components.

The Ember community maintains this wonderful framework and continues to build in efficiencies as JavaScript matures. This framework is built by people who have struggled with the same challenges you will face as you hone your JavaScript skills. Remember to ask questions when something does not work, help fix bugs when you find something that is broken, and give back when you can. You are now part of the greater JavaScript community.