Computed properties are a huge part of managing model properties for your templates and components. Ember.computed is a method that takes the values of scoped properties and returns a value when the method ends. Invoking the following, for example, would give you a computed property with the object’s first_name property changed to lowercase:

Ember.computed('first_name', function(){
  return this.get('first_name').toLowerCase();
});

In this example, Ember.computed is acting as an event listener for changes to first_name. You do not have to change the set method to trigger an event, you do not have to add an event listener, and you do not have to change the first_name property. All you do is create a new property that returns the value you want.

The use of computed properties is fairly global in Ember. You will also be creating computed properties for components in Chapter 25. A computed property is used either as a decorator for a view or component, like the example above, or to retrieve specific data embedded deep in the model object.

“Decorating” data means formatting it a certain way – such as making a string lowercase. Data from an API is not always formatted the way you want it. Decorators are functions that input arguments and output objects or arrays to be used specifically for the view layer of an application. The formatting or construction of new decorated data generally does not return to the database. For this reason, decorators are generally added to a controller, unless every page is rendering data from a model that is not formatted in the database.

Add a computed property for a fullName to your witness model in app/models/witness.js.

import DS from 'ember-data';

export default DS.Model.extend({
  fName: DS.attr('string'),
  lName: DS.attr('string'),
  email: DS.attr('string'),
  sightings: DS.hasMany('sighting'),
  fullName:  Ember.computed('fName', 'lName', function(){
    return this.get('fName') + ' ' + this.get('lName');
  })
});

(If the autorestarting server complains, be sure you added the trailing comma to the sightings property declaration. It is an easy one to miss.)

The property you added to the witness model is a function that will be invoked every time fName and lName change. Computed properties can take any number of arguments as observed properties with the final argument being the function to return a value. Each argument that is a property will trigger the function argument to be invoked.

Open app/routes/witnesses.js and create a new witness record to test the computed property of the witness model:

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    let witnessRecord = this.store.createRecord('witness', {
      fName: "Todd",
      lName: "Gandee",
      email: "[email protected]"
    });
    return [witnessRecord];
  }
});

To get your witness data onscreen, edit app/templates/witnesses.hbs to use the same {{#each}} iterator used in app/templates/sightings/index.hbs:

{{outlet}}
<h1>Witnesses</h1>
<div class="row">
  {{#each model as |witness|}}
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="well">
        <div class="thumbnail">
          <div class="caption">
            <h3>{{witness.fullName}}</h3>
            <div class="panel panel-danger">
              <div class="panel-heading">Sightings</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  {{/each}}
</div>

Navigate to http://localhost:4200/witnesses and check out the results (Figure 21.3).

Figure 21.3  Witnesses listing

In this view, you added the listing of witnesses (which, at the moment, includes just one witness) and used a computed property to display the witness’s fullName property. This property was generated from the values you added when creating the witness record. With witnessRecord.set, you can supply a different first name or last name before the model callback returns the record to see the property change.

You have come pretty far in these first few chapters on Ember! You can now define your data models, create records, create computed properties, and get and set property values. In a moment, you will read about retrieving, updating, and destroying records using an API.

In the next chapter, you will learn about using adapters, serializers, and transforms to link your data models with data on the web.