Handlebars template won't render ember data object

Question

I've built an ember front-end app that consumes an API made with rails in another application. The ember app is successfully requesting and receiving data from the rails api and one of my handlebars template (the index page that displays a list of all of the Graduates from my Graduates model) is working fine. The page meant to display individual graduates however is not able to render data about those individual graduates. Although when I open the ember tool in the developer console in my browser (Chrome), that data is present.

I'm new to ember and I've been trying to solve this for 2 days but am 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/graduates/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>

Answer 1

Should be

  // app/templates/graduate.hbs
  <h1>{{model.firstName}} {{model.lastName}}</h1>

Your template

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

shows firstName and lastName properties from current controller (class Ember.Controller), but they are not set.

See the history of question here: http://emberjs.com/deprecations/v1.x/#toc_objectcontroller .