EmberJS template is not redering model values

Here is my app/models/post.js (Which is the model)

import DS from 'ember-data';

var attr = DS.attr;

export default DS.Model.extend({
  author: DS.belongsTo('author'),
  title: attr('string'),
  body: attr('string')
});

Here's the route which is located at the app/routes/post.js

import Ember from 'ember';

export default Ember.Route.extend({
});

Here's the template for handling it app/templates/post.hbs

<h1>{{title}}</h1>
<h2>by {{author.name}}</h2>

<hr>
<div class = "body">
{{body}}
</div>

Here is my router.

Router.map(function() {
  this.route('about');
  this.resource('posts');
  this.resource('post',{ path: '/posts/:post_id'});
});

Whenever I access the localhost:4200/post/1 The view renders nothing, however whenever I view the network it retrieves this json data

{"post":{"id":1,"title":"How to win at life","body":"Body","author":1},"authors":[{"id":1,"name":"George","posts":[1,2]}]}

Here's my directory structure

Whenever I run my debugger and hover at the page it shows that I have a model