Nested routes confusion

1

Hello,

This is what I am trying to do. I have a user profile page that uses a user model and retrieves the data from the backend via ember data. I can see that ember requests /users/1 and I am able to use the data in the template associated with this route. So far so good.

On the profile page I also want it to load the photos that the user has uploaded. On the backend I have setup the request /users/1/photos. This is where I am getting confused. If I have understood this correctly I should use a nested route to get ember to request this data?

I will also have several links on the profile template to change the sorting and show other photos. So, on the profile page I would have a link to update the default photos content and request /users/1/photos?sort=popular from the backend. I would also have pagination requests like /users/1/photos?sort=popular&offset=20&limit=20. Old school wise this would be a simple ajax update to a div on the page with different params. As I will also be adding sections to the profile page where photos do not belong to the user I can’t always assume that photos will belong to the user model like photo comments would.

Would appreciate any pointers to get me started in the right direction. I have read a few tutorials but I can’t seem to figure out how to make it work in my use case.

Thanks!

2

OK, so I have done more reading. I will try to illustrate below what I am trying to do:

Url structure:

/username → loads a main template with the user model attached to it. Also loads photos into the main templates outlet.

/username/about → loads main template as before and fills outlet with about info. /username/posts → loads main template as before and fills outlet with posts.

Now what I am having difficulties doing is how to by default load the photos content when I am at the root url.

My router so far:

this.resource('profile', { path: '/:username' }, function() {
    	this.resource('photos', { path: 'photos'});
	});

My profile route:

App.ProfileRoute = Ember.Route.extend({
	model: function(params) {
    	return App.User.find(params.username);
    },
    redirect : function() {
    	this.transitionTo('photos');
	},
    renderTemplate: function() {
    	this.render('profile');
	}
});

This works but each time I go to username it redirects to /username/photos. I want to display the photos route in the profile route. Also my /:username path variable doesn’t really seem to work properly as I get redirected to /<App.User:ember248:username>/photos. I am sure that I am missing something! There must be a better way to setup the route /:username as it doesn’t work with the linkto helper either.

Thanks!

3

I was able to solve the dynamic route by adding this to the profile route:

serialize: function(model) {
    	return { username: model.get('username') };
	},

Now my linkto helper works and I don’t get weird uri’s on redirect.

For my app structure I figured out that I can create a separate route for the profile index. See below:

App.ProfileIndexRoute = Ember.Route.extend({
    renderTemplate: function() {
    	this.render('photos', {
			into: 'profile',
			controller: 'photos'
		});
	}
});

Would love to get feedback on this if this is the correct way of doing things?

Also, it’s looking like to support my backend api structure I will need to use my own BasicAdapter rather than the RESTAdapter.