Adding a new route to an existing Ember.js app, need input - ember.js

Question

I have an existing Ember app which works great. I need to add a new subroute to the app to allow users to view additional information. My current route looks like this:
Social.Router.map(function() {
this.resource('accounts', { path: '/accounts' }, function(){
this.resource('account', { path: ':account_id'});
});
});
with the following URL
#/accounts/56/
The route I'd like to add is this:
#/accounts/56/interactions
So I added a nested route like so:
Social.Router.map(function() {
this.resource('accounts', { path: '/accounts' }, function(){
this.resource('account', { path: ':account_id'}, function(){
this.route('interactions', { path: '/interactions'});
});
});
});
But when that route is accessed I get the following error:
Uncaught Error: assertion failed: The route interactions was not found core.libs.js:2236
Uncaught Error: You cannot modify child views while in the inBuffer state core.libs.js:19298
So I also added an empty InteractionsRoute but that didn't resolve it:
Social.InteractionsRoute = Ember.Route.extend();
Does anyone have input on what might be going wrong?
In addition I'm trying to add a button to the interface which looks like this:
{{#linkTo "interactions"}}# Interactions{{/linkTo}}

Answer 1

Social.Router.map(function() {
this.resource('accounts', { path: '/accounts' }, function(){
this.resource('account', { path: ':account_id'}, function(){
this.route('interactions', { path: '/interactions'});
});
});
});
Like this the URL to interactions is #/interactions
But you wanted this: #/accounts/56/interactions
Therefore you need to remove the preceding slash in the path hook of interactions, otherwise you'll indicate that this route will be accessed from the root.
Social.Router.map(function() {
this.resource('accounts', { path: '/accounts' }, function(){
this.resource('account', { path: ':account_id'}, function(){
this.route('interactions', { path: 'interactions'});
});
});
});
By the way, if you don't declare a path hook the url will be the same as the route name. So you can also use this:
Social.Router.map(function() {
this.resource('accounts', function(){
this.resource('account', { path: ':account_id'}, function(){
this.route('interactions');
});
});
});

Answer 2

Try splitting out your list from the individual record view.
Social.Router.map(function() {
this.resource('accounts');
this.resource('account', { path: '/accounts/:account_id' }, function() {
this.route('interactions');
});
});
Your route name for interactions should be like this:
Social.AccountInteractionsRoute = Ember.Route.extend();
From the table on http://emberjs.com/guides/routing/defining-your-routes/
If all else fails you could just avoid the nested resources and define the paths for each route.
Social.Router.map(function() {
this.resource('accounts');
this.resource('account', { path: '/accounts/:account_id' });
this.resource('account-interactions', { path: '/accounts/:account_id/interactions' });
});