Using the example route defined below how can a link be defined to /post/123/comments?
Router.map(function() {
this.route('post', { path: '/post/:post_id' }, function() {
this.route('edit');
this.route('comments', { resetNamespace: true }, function() {
this.route('new');
});
});
this.route('comments');
});
Since resetNamespace: true is set on comments, the route post.comments does not exist. Otherwise the following would work.
{{#link-to "post.comments" "123"}}Link{{/link-to}}
When trying to link to news using the comment id, the error More context objects were passed than there are dynamic segments for the route: comments occurs.
{{#link-to "comments" "123"}}Link{{/link-to}}
An example of the second case can be seen here: https://ember-twiddle.com/d9f3b5e692573c80e803
Thanks to locks for pointing me in the direction. The specific issue is how to reuse as much of the route and template as possible for different paths.
router.js:
Router.map(function() {
this.route('post', { path: '/post/:post_id' }, function() {
this.route('edit');
this.route('comments', function() {
this.route('new');
});
});
this.route('comments');
});
routes/post/comments.js:
import Comments from '../comments';
export default Comments.extend({
renderTemplate() {
this.render('comments');
}
});
This will extend the existing comments route to reuse the model and actions defined in the base route. The renderTemplate is still necessary to load the comments template instead of the post.comments template.
Since you're resetting the namespace, you are effectively overriding one of the comments route with the other. You're doing something akin to
obj['comments'] = firstRoute;
obj['comments'] = secondRoute;
Route names need to be unique, which they would be if you didn't reset the namespace, as well as the path. If two routes have the /foobar path, then Ember won't know which one to transition to.
If what you want is to reuse parts from other routes, there are ways to do that.
Related
I'm starting out on Ember.js and I have a three level route for one of the pages. This is what the router map looks like:
App.Router.map(function(){
this.resource('tests');
this.resource('create', function() {
this.resource('create.questions', {path: ':test_id' }, function() {
this.resource('create.questions.question', {path: ':question_id'});
});
});
});
In my CreateRoute, I transition onto the create/questions route using the following code:
this.get('controller').transitionToRoute('create/questions', test);
Which works fine, but in my CreateQuestionsRoute, this code doesn't work:
this.get('controller').transitionToRoute('create/questions/question', question);
The error received:
Uncaught Error: Assertion Failed: Error: Assertion Failed: The route create/questions/question was not found
Using the Chrome Ember inspector plugin, I can see the routes are listed as such:
CreateRoute
CreateQuestionsRoute
CreateQuestions.QuestionRoute
This seems like arbitrary behaviour. There isn't much guidance on how to handle multiple nested routes. Some references told me that my route map should actually look like this:
App.Router.map(function(){
this.resource('tests');
this.resource('create', function() {
this.resource('questions', {path: ':test_id' }, function() {
this.resource('question', {path: ':question_id'});
});
});
});
Whereby the route name would automatically be nested (no need for dot notations), but this did not work. Can anyone with Ember wisdom shine some light for me?
Go with this:
App.Router.map(function(){
this.resource('tests');
this.resource('create', function() {
this.resource('questions', {path: ':test_id' }, function() {
this.resource('question', {path: ':question_id'});
});
});
});
The only reason to add namespace a resource is if the resource isn't unique. Which means from any route you can use
this.transitionTo('questions', model);
this.transitionTo('question', modelForQuestions, modelForQuestion);
Example: http://emberjs.jsbin.com/OxIDiVU/636/edit
If you want to keep your namespace, I'd go with camelCase instead of dot notation, since generally the dot means property on the current scope.
Example: http://emberjs.jsbin.com/OxIDiVU/637/edit
I have a need for deep nesting some routes in ember, I have something like this.
this.resource('wizards', {
path: '/wizards'
}, function() {
this.resource('wizards.google', {
path: '/google'
}, function() {
this.resource('wizards.google.register', {
path: '/register'
}, function() {
this.route('step1');
this.route('step2');
this.route('step3');
this.route('summary');
});
});
});
What I was expecting was as structure like this:
url /wizards/google/register/step1
route name wizards.google.register.step1
route Wizards.Google.Register.Step1Route
Controller Wizards.Google.Register.Step1Controller
template wizards/google/register/step1
but I got this:
url /wizards/google/register/step1 //as expected
route name wizards.google.register.step1 //as expected
route WizardsGoogle.Register.Step1Route
Controller WizardsGoogle.Register.Step1Controller
template wizards/google.register.step1
What I don't get is when does ember stop using capitalization (WizardsGoogle) and start using namespaces (WizardsGoogle.Register). The seemingly inconsistency confuses me. I would have expected either of them.
I met the same things with deep nested resources. Although I didn't know how this happens, what I can tell is that you can always use CapitalizedNestedRoute without namespace, and Ember can recognize it. Although in Ember Inspector it displays "WizardsGoogle.Register.Step1Route".
In your example I defined such route:
App = Em.Application.create();
App.Router.map(function() {
this.resource('wizards', function() {
this.resource('wizards.google', function() {
this.resource('wizards.google.register', function() {
this.route('step1');
this.route('step2');
this.route('step3');
});
});
});
});
App.IndexRoute = Em.Route.extend({
beforeModel: function() {
// Transition to step1 route
this.transitionTo('wizards.google.register.step1');
}
});
App.WizardsGoogleRegisterStep1Route = Em.Route.extend({
model: function() {
// You can see this alert when you enter index page.
alert('a');
}
});
In this example the app will transition to WizardsGoogleRegisterStep1Route with no problem. And if you use container to find route like this:
App.__container__.lookup('route:wizards.google.register.step1').constructor
It will also display App.WizardsGoogleRegisterStep1Route. It's the same as Ember Guide describes. http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources And Ember Guide doesn't introduce namespace route.
So I think it's better to according to what Ember Guide suggests (always use CapitalizedNestedRoute). And in my opinion it's easier to define CapitalizedNestedRoute than nested.namespace.route.
Finally, if you really want to use namespace route/controller/template, you can have a look at Ember.DefaultResolver. Check the API to learn how to extend it so container can lookup modules by your own rules.
Routes are "namespaced" inside resources. And resources uses what you call capitalization, where they sort of define a namespace (for routes to use).
So this set of routes:
App.Router.map(function() {
this.resource('posts', function() {
this.route('new');
this.route('old');
this.route('edit');
this.route('whatever');
});
});
Would result in routes with the following name:
PostsRoute
PostsNewRoute
PostsOldRoute
PostsEditRoute
PostsWhateverRoute
Whereas, the following set of routes:
App.Router.map(function() {
this.resource('posts', function() {
this.resource('photos');
this.resource('comments');
this.resource('likes');
this.resource('teets');
});
});
Would result in route with the following names:
PostsRoute
PhotosRoute
CommentsRoute
LikesRoute
TeetsRoute
Also note, that resources within resources don't get "namespaced" to the "parent" resource, so you'll always ever have the form:
{CapitalizedResourceName}Route // for resources
{CapitalizedParentResourceName}{RouteName}Route // for routes
I hope this helps you!
I have these routes defined:
this.resource('projects', function() {
this.resource('project', { path: ':project_id'}, function() {
this.route('details');
this.route('members');
});
});
What I thought was that by convention project.details route would look for "project/details" template. It does but strangely it does not get the correct model. See http://jsbin.com/ELaxigE/19/edit
Now instead of providing "project/details" template if I create "project" template then it works. See http://jsbin.com/ELaxigE/21/edit
I am confused what is happening. Can someone explain?
This has nothing to do with templates. You haven't defined the model for the ProjectDetails route. You can do so like this:
App.ProjectDetailsRoute = Em.Route.extend({
model: function() {
return this.modelFor('project');
}
});
Given a route. When the model hook ins't defined, and have a dynamic segment that ends with _id:
this.route('edit', { path: ':user_id' });
This will generate a route like this:
App.EditRoute = Ember.Route.extend({
model: function(params) {
return App.User.find(params.id);
}
});
In your case the only dynamic segmented route is project, because the :project_id.
this.resource('project', { path: ':project_id'}, function() { ... });
So because details and members, are just normal routes, it doesn't have a model.
When you change the template project/details to project, the things work because:
You transition to project.details, first is transitioned to project route, since you have declared this.resource('project'...). And because it's a dynamic segmented route, the App.Project instance is returned, and the your template is rendered bound to this model.
After this, the child route project.details is transitioned, but this time, the template project.details not exist. So nothing is rendered.
I think that the solutions are the #alexspeller answer, or:
this.resource('project', function() {
this.route('details', { path: 'details/:project_id' });
this.route('members', { path: 'members/:project_id' });
});
I hope it helps.
This is a follow-up from Understanding Ember routes.
Master/detail views are great but I'm trying to have a a hierarchical URL route without nesting their templates. However, I still need access to the parent model for things like breadcrumb links and other references.
So /users/1/posts should display a list of posts for user 1. And /users/1/posts/1 should display post 1 for user 1, but it shouldn't render inside the user template's {{outlet}}. Instead, it should completely replace the user template. However, I still need access to the current user in the post template so I can link back to the user, show the user's name, etc.
First I tried something like this (Method #1):
App.Router.map(function() {
this.resource('user', { path: '/users/:user_id' }, function() {
this.resource('posts', function() {
this.resource('post', { path: '/:post_id' });
});
});
});
...
App.PostRoute = Ember.Route.extend({
model: function(params) {
return App.Post.find(params.post_id);
},
renderTemplate: function() {
this.render('post', {
into: 'application'
});
}
});
This replaced the the user template with the post one, as expected. But when I click the browser's back button the user template doesn't render again. Apparently the post view is destroyed but the parent view is not re-inserted. There are a few questions on here that mention this.
I then got it to work with something like this (Method #2):
App.Router.map(function() {
this.resource('user', { path: '/users/:user_id' }, function() {
this.resource('posts');
this.resource('post', { path: '/users/:user_id/posts' }, function() {
this.resource('post.index', { path: '/:post_id' });
});
});
...
App.PostRoute = Ember.Route.extend({
model: function(params) {
return App.User.find(params.user_id);
},
setupController: function(controller, model) {
controller.set('user', model);
}
});
App.VideoIndexRoute = Ember.Route.extend({
model: function(params) {
return App.Post.find(params.post_id);
}
});
App.PostIndexController = Ember.ObjectController.extend({
needs: 'post'
});
But this seems a bit hacky to me and not very DRY.
First, I need to retrieve the User again in the PostRoute and add it as an ad-hoc variable to the PostController (this wouldn't be necessary if the routes were properly nested and I could just set a needs: 'user' property in the PostController). In addition, this may or may not have an impact on the back-end depending on the adapter implementation of ember-data or whatever technology is used to retrieve the data from the server (i.e. it may cause an unnecessary second call to load User).
I also need an additional `PostIndexController' declaration just to add that new dependency, which is not a big deal.
Another thing that doesn't feel right is that /users/:user_id/posts appears twice in the router configuration (one nested, one not).
I can deal with these issues and it does work but i guess that, overall, it seems forced and not as graceful. I'm wondering if I'm missing some obvious configuration that will let me do this with regular nested routes or if someone has a recommendation for a more "Ember.js way" of doing this.
I should mention that regardless of the technical merits of Method #2, it took me quite a while to figure out how to make it work. It took a lot of searching, reading, experimenting, debugging, etc. to find just the right combination of route definitions. I would imagine that this is not a very unique use-case and it should be very straightforward for a user to set up something like this without spending hours of trial and error. I'll be happy to write up some tips for this in the Ember.js documentation if it ends up being the right approach.
Update:
Thanks to #spullen for clarifying this. My case was not as straightforward as the example because some sub-routes need nested templates and some don't, but the answer helped me figure it out. My final implementation looks something like this:
App.Router.map(function() {
this.resource('users', { path: '/users/:user_id' }, function() {
this.resource('users.index', { path: '' }, function() {
this.resource('posts')
});
this.resource('post', { path: '/posts/:post_id' }, function() {
this.resource('comments', function() {
this.resource('comment', { path: '/:comment_id' });
});
});
});
});
So now posts renders under the users template but post replaces everything. comments then renders under post and comment, in turn, renders under comments.
All of them are sub-routes of users so the user model is accessible to all of them without acrobatics, by doing this.modelFor('users') in each Route where needed.
So the templates look like this:
users
|- posts
post
|- comments
|-comment
I don't know why the { path: '' } is needed for the users.index resource definition but if I take it out Ember doesn't find the users route. I would love to get rid of that last vestige.
You could define the parent template to just display the outlet and have an index route which will get displayed inside that. Then for the nested resource you can do the same thing.
<script type="text/x-handlebars" data-template-name="user">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="user/index">
<h2>user/index</h2>
</script>
<script type="text/x-handlebars" data-template-name="posts">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="posts/index">
<h2>posts/index</h2>
</script>
That way it won't be a master/detail.
The router would be:
App.Router.map(function() {
this.resource('user', function() {
this.resource('posts', function() { });
});
});
Then if you need to get information about the parent you can use modelFor. So if you were in posts, you could do this.modelFor('user');
Here's a jsbin that demonstrates this.
Hope this is helpful.
Can some one explain why nested resources require to list the path hierarchy in the route name instead of just the route?
Eg. resource1 > resource1.resource2
Emberjs seems to be all about reducing the amount of code. Is there some usecase for resources I don't see which explains why resources should be defined this way.
I couldn't get my example to work in jsfiddle or jsbin so I hosted it here: http://emberjs.mattmazzola.net/
I was basing my solution from the technique described in this similar StackOverflow question is here: Ember.js pre4 multiple nested routing
Basically, you notice I have a resource 'animals' with sub resources 'cats' and 'dogs'. However, if I just name them 'cats' and 'dogs' respectively the router says "route animals.cats' is not found. Then if I add the 'animals.' prefix to make the nested route 'animals.cats' the url becomes index#/animals/animals.cats which doesn't make sense. Of course we fix this by overriding the path attribute, but I don't understand why Emberjs doesn't do this by default. Am I defining my resources/routes incorrectly and this is a side affect?
In other words, I'm currently doing this:
App.Router.map(function() {
this.resource('products', function() {
this.route('desktops');
this.route('laptops');
});
this.resource('animals', function() {
// the url for this route is bad, but default behavior?
this.resource('animals.cats', function() {
this.route('cat', {path: ':cat_id'});
});
// Why does this require stating the parent route 'animals' again?
this.resource('animals.dogs', {path: 'dogs/'}, function() {
this.route('dog', {path: ':dog_id'});
});
});
});
How can I write routes like this:
App.Router.map(function() {
this.resource('products', function() {
this.route('desktops');
this.route('laptops');
});
this.resource('animals', function() {
this.resource('cats', function() {
this.route('cat', {path: ':cat_id'});
});
this.resource('dogs', function() {
this.route('dog', {path: ':dog_id'});
});
});
});
hmm, i think the second version should work if you have App.AnimalsIndexRoute, App.CatsIndexRoute and App.DogsIndexRoute (and possibly a few other Ember.Routes) defined correctly. could you maybe post the rest of your code here or in a jsfiddle if you still have that problem?