Handlebars.js template not transitioning properly with Ember.js

Handlebars.js template not transitioning properly with Ember.js

I am hoping that someone can help me out with this because it is driving
me to shout things at strangers.
*NOTE: I do have a JS Bin for this, but it is not completely operational
with FIXTURE data at the moment.
I am currently building a small web application leveraging ember.js and
handlebars.js - nothing crazy, just rendering a list of blog posts within
a handlebars template called 'blogs'. When the user clicks on the header,
it loads a blog detail template called 'blog'. This works fine - 'blogs'
is hidden and 'blog' is now rendered. As you can see from the first 2
screenshots, the posts are loaded, then blog details are shown.


Where things awry is when i attempt to click a link within template 'blog'
that takes me back to template 'blogs'. Instead of hiding template 'blog'
and showing template 'blogs' again, template 'blog stays in place with
template 'blogs' showing under template 'blog', as shown in this
screenshot:

Template 'blog' will then be displayed indefinitely regardless of what
links I click unless I refresh the browser.
Here is a little bit of code you may find useful:
GY.Router.map(function () {
this.route('blogs', { path: '/' });
this.route('blogs', { path: '/blog' });
this.route('blog', { path: '/blog/:blog_number' });
this.route('albums', { path: '/albums' });
});
I wanted the unique identifier for the blog post to be something other
than an integer like '#/blog/2', so I decided to use my model's
blog_number property, leaving me with something like this: '#/blog/eTWQFxc
To do this, I leveraged my blog route's serialize function:
GY.BlogsRoute = Ember.Route.extend({
model: function(){
return GY.BlogPost.find();
}
});
GY.BlogRoute = Ember.Route.extend({
serialize: function (model) {
return { blog_number: model.BlogNumber };
}
});
Here is the BlogPost model I defined - note that I reopen the class and
make a $.get call because I could not make a get work with Ember Data:
GY.BlogPost = DS.Model.extend({
Id: DS.attr('string'),
BlogNumber: DS.attr('string'),
Title: DS.attr('string'),
Description: DS.attr('string'),
Body: DS.attr('string'),
Comments: DS.hasMany('GY.Comment')
}).reopenClass({
find: function () {
var self = this;
var records = [];
$.get('/blog', function (data) {
if (data.BlogPosts) {
var posts = data.BlogPosts;
//load our model
posts.forEach(function (p) {
records.addObject(GY.BlogPost.createRecord(p))
}, this);
}
});
return records;
}
});