Handlebars template will not render ember data object

I have created a frontend app that uses an API built with rails in another app. The ember app successfully requests and accepts data from the rails api and one of my rudder templates (an index page that displays a list of all my graduate model's alumni) is working fine. A page designed to display individual alumni, however, cannot provide data on those individual alumni. Although, when I open the ember tool in the developer console in my browser (Chrome), this data is present.

I'm new to ember and I've been trying to solve this for 2 days, but I'm totally stumped, any help would be greatly appreciated!

app / adapters / application.js:

import DS from 'ember-data';

export default DS.ActiveModelAdapter.extend({
   namespace: 'api/v1',
   host: 'http://localhost:3000'
});

      

        
        
        
      

    

app / models / graduate.js:

import DS from 'ember-data';

export default DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  cohort: DS.attr('string'),
  currentJob: DS.attr('string'),
  bio: DS.attr('string'),
  news: DS.attr('string'),
  website: DS.attr('string'),
  picture: DS.attr('string'),
  createdAt: DS.attr('date'),
  updatedAt: DS.attr('date')
  });

      

        
        
        
      

    

routes / alumni / index.js:

import Ember from 'ember';

export default Ember.Route.extend({
   model: function() {
      return this.store.find('graduate');
   }
});

      

        
        
        
      

    

routes / graduate.js:

import Ember from 'ember';

 export default Ember.Route.extend({
    model: function(params) {
       return this.store.find('graduate', params.graduate_id);
    }
 });

      

        
        
        
      

    

app / router.js:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
 });

export default Router.map(function() {
   this.resource('graduates', function() {
     this.resource('graduate', { path: '/:graduate_id' });
     });
 });

      

        
        
        
      

    

environment.js:

/* jshint node: true */

module.exports = function(environment) {
  var ENV = {
    contentSecurityPolicy: {
    'connect-src': "'self' http://localhost:3000",
     'default-src': "'none' http://localhost:3000",
     'script-src': "'self'",
     'font-src': "'self' http://localhost:3000",
     'img-src': "'self' http://localhost:3000",
     'style-src': "'self' http://localhost:3000 'unsafe-inline",
     'media-src': "'self' http://localhost:3000"
  },


modulePrefix: 'flatbook-front',
environment: environment,
baseURL: '/',
locationType: 'auto',
EmberENV: {
  FEATURES: {
    // Here you can enable experimental features on an ember canary     
    build
    // e.g. 'with-controller': true
  }
},

 APP: {
  // Here you can pass flags/options to your application instance
  // when it is created
  }
 };

if (environment === 'development') {
  // ENV.APP.LOG_RESOLVER = true;
  // ENV.APP.LOG_ACTIVE_GENERATION = true;
  // ENV.APP.LOG_TRANSITIONS = true;
  // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
  // ENV.APP.LOG_VIEW_LOOKUPS = true;
}

 if (environment === 'test') {
   // Testem prefers this...
   ENV.baseURL = '/';
   ENV.locationType = 'none';

   // keep test console output quieter
   ENV.APP.LOG_ACTIVE_GENERATION = false;
   ENV.APP.LOG_VIEW_LOOKUPS = false;

   ENV.APP.rootElement = '#ember-testing';
 }

  if (environment === 'production') {

 }

  return ENV;
 };

      

        
        
        
      

    

app / templates / graduate.hbs:

<h1>{{firstName}} {{lastName}}</h1>