I'm aware that ember doesn't support this, as per http://emberjs.com/guides/routing/defining-your-routes/ : "You cannot nest routes, but you can nest resources"
But what I'm trying to do seems reasonable, so I'm assuming there's support for this somewhere.
The goal here is to have a structure like this:
this.resource('project', { path: '/project/:project_id' }, function(){
this.route('manage', function(){
this.route('settings');
this.route('team');
this.route('notifications');
/* etc */
});
});
In words, I'd like to have a "manage" section with subsections for the things you can manage, all of which referencing my "project" instance.
I could do this:
this.resource('project', { path: '/project/:project_id' }, function(){
this.route('manage.settings',{path : '/manage/settings'});
this.route('manage.team',{path : '/manage/team'});
/*etc*/
});
But where this fails is:
I can't share a nav between resource subsections (i.e have a manage template with an outlet that is populated by the sub route)
My settings.hbs doesn't isn't accessing the parent resource (I'm sure this is fixed inside the router config's "model" or "setupController" hooks, I'm just not sure which / how)
Any help?
Why not use a nested resource?
this.resource('project', { path: '/project/:project_id' }, function(){
this.resource('manage', function(){
this.route('settings');
this.route('team');
this.route('notifications');
/* etc */
});
});
This is not so different from the post/comments resources described in the ember guides: http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources
I'd like to have a "manage" section with subsections for the things you can manage, all of which referencing my "project" instance.
Ok. So using nested-resources approach you will have a manage.hbs template. To reference the project instance from the manage section or any of the subsections just use needs like this:
App.ManageController = Ember.Controller.extend({
needs: "project",
projectBinding: "controllers.project"
});
See http://emberjs.com/guides/controllers/dependencies-between-controllers/ for more detail.
Related
Working for a few years with ember.js now, it's still not quite clear to me, what should be considered as best practice for structuring list, view, create and update routes.
The projects I've worked with so far mostly used to routing trees per entity. The pluralized entity name for listing with a subroute for create and the singular entity name for detail view with a subroute for editing. As an example a post model would have these for routes: /posts for listing posts, /posts/new for the create functionality, /post/:post_id for showing a single post and /post/:post_id/edit for editing that one. The corresponding router would look like this one:
Router.map(function() {
this.route('post', { path: '/post/:post_id' }, function() {
this.route('edit');
});
this.route('posts', function() {
this.route('new');
});
});
This approach is working quite nicely for detail and edit view cause they are sharing the same model. So the model hook of the edit route could just reuse the model of the detail view route. In ember code this looks like the following:
// app/routes/post.js
import Route from '#ember/routing/route';
export default Route.extend({
model({ post_id }) {
return this.get('store').findRecord('post', post_id);
}
});
// app/routes/post/edit.js
import Route from '#ember/routing/route';
export default Route.extend({
model() {
return this.modelFor('post');
}
});
Normally we would return a collection of posts from posts route model hook and not implementing the model hook of posts.new route (or returning a POJO / Changeset there depending on architecture but that's not the question here). Assuming we are not implementing the model hook of posts.new the routes would look like:
// app/routes/posts.js
import Route from '#ember/routing/route';
export default Route.extend({
model({ post_id }) {
return this.get('store').findAll('post');
}
});
// app/routes/posts/new.js
import Route from '#ember/routing/route';
export default Route.extend({
});
But now this approach is not working well anymore cause a transition to posts.new route is blocked until the collection of posts are loaded. Since we don't need this collection to create a list of posts (at least if we only show them in posts.index route and not on all subroutes) this doesn't feel right.
Side note for those ones not that familiar with ember: Nested routes model hooks are executed in order. So in our case first the model hook of application route, afterwards posts route and then posts.new route waiting for any promise executed by one of them.
So what should then be considered as best practice?
Should the fetching of posts live in posts.index route if we are not showing them on nested routes?
Shouldn't the create route be a nested under the list route? So should we have posts, post-new, post and post.edit routes? Feels confusing since the post related code is splited over three route trees. Also it would go against the goal of the improved file layout being developed currently since the code would be splitted over three directories.
Should we just take the tradeoff of unnecessarily fetching the collection of posts since mostly the user flow comes from this route before the creation route and therefore the model hook is in most cases already loaded anyway?
Would appreciate any thoughts on that one. Decided to not ask that question in the community slack to better document the answer.
The main point of having a nested route in ember is to nest the output of your child route within the parent route. While your current structure works, it doesn't really match up with how ember has structured route functionality.
You should use a singular nested route with an explicitly defined index route.
At every level of nesting (including the top level), Ember
automatically provides a route for the / path named index. To see when
a new level of nesting occurs, check the router, whenever you see a
function, that's a new level.
Router.map(function() {
this.route('posts', function() {
this.route('favorites');
});
});
is equivalent to
Router.map(function() {
this.route('index', { path: '/' });
this.route('posts', function() {
this.route('index', { path: '/' });
this.route('favorites');
});
});
If you create an explicit posts/index.js file, this can be used as your list route. Doing this will help your avoid the issue where all posts are fetched before transitioning into the create route.
While different from the structure you currently have, I'd suggest the following.
Router.map(function() {
this.route('posts', function() {
this.route('index'); // /posts - posts/index.js
this.route('new'); // /posts/new - posts/new.js
this.route('view', { path: '/:post_id' } // /posts/1234 - posts/view.js
this.route('edit', { path: '/:post_id/edit' } // /posts/1234/edit - posts/edit.js
});
});
Depending on the complexity of logic in the new and edit, you can consider combining the two routes into one, or simply transitioning the new to edit after generating the empty model.
The benefits of this include:
Simplicity
You don't have to re-define your paths for all of the routes. Everything falls under posts/ and the route specifies the next piece.
Consistency
the JSONapi schema uses plural routes for both fetching a collection as well as a singular object.
Logic wrapping
If, you use and explicit index.js file, you can use the old posts.js file as a common wrapper for all items within the post namespace. Posts.js will have an outlet that the index, new, edit, and view routes are placed into
If you need your view and edit route to share the same model generation, you can nest your view/edit into a common group so they share a parent model.
this.route('posts', function() {
this.route('post', { path: '/:post_id' }, function() {
this.route('view', { path: '/' }) ;
this.route('edit', { path: '/edit' });
})
})
To link to record you can use something like this in your route:
this.route('clients', function() {
this.route('all',function(){
this.route('view',{
path:'view/:client_id'
});
});
});
So if the user were to go to:
/clients/all/view/-KdFmDwwWAHDFjjaG6aA
They could view that client record.
Is it possible to link at a deeper level? For example:
/clients/all/view/-KdFmDwwWAHDFjjaG6aA/property/-KdFeTqqUIKLFqbaP9aB
?
That way you could be looking at a specific client record and then launch an overlay for example to show the specifics on a single property that client has for sale?
I'm not sure how to structure the router or the link-to to accomplish this?
I hope I understand your question correctly. Here is my answer,
Yes, it's possible to have a deeper level, I will change your route config a bit to :
this.route('clients', { path: '/clients' }, function(){
this.route('view', { path: '/:clients_id' }, function(){
this.route('property', { path: '/property/:property_id' });
});
});
So in this case, your link-to code in the HBS would be
{{#link-to 'clients.view.property' clientId}}
whatever
{{/link-to}}
and now file structure is :
clients/
|___index.hbs
|___view.hbs
|___view/
|___propery.hbs
Please remember that you need to also modify your route.js for each properly. I assumed you don't have any problems for that.
if you need more help please let me know.
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.
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 am trying to understand the difference between a Route and a Resource. The way I understand Resource helps to set sub paths of a Route object to another Route Object. But its unclear when i think of default name mapping happening for paths as well.
Please Note that from 1.11.0 onwards, this.route is only used instead of this.resource. Source: http://guides.emberjs.com/v1.11.0/routing/defining-your-routes/*
Have a look at this post for a detailed explanation.
This is a rough summary of this post (i have modified a bit):
Ever since the change to resource and route a lot of people are
confused about the meaning of the two and how they affect naming.
Here’s the difference:
resource - a thing (a model)
route - something to do with the thing
So this means a router using a route and resource might look like this:
App.Router.map(function() {
this.resource("posts", { path: "/" }, function() {
this.route("new", { path: "/new" });
});
this.route("another", { path: "/another" });
});
This would result in the following routes being created/used:
PostsRoute, PostsController, PostsView
PostsIndexRoute, PostsIndexController, PostsIndexView
PostsNewRoute, PostsNewController, PostsNewView
AnotherRoute, AnotherController, AnotherView
As we see from this example, resource effect the naming of the Controllers,Routes and Views being used/created (The "new" route is treated as subordinate to "posts" resource). Cite from the original source (i modified it, because it was irritating as Patrick M correctly pointed out in the comments):
This means whenever you create a resource it will create a brand new
namespace. That namespace is named after the
resource and all of the child routes will be inserted into it.
Update: more complex example with nested resources
Consider the following more complex example with multiple nested resources:
App.Router.map(function() {
this.resource("posts", { path: "/" }, function() {
this.route("new", { path: "/new" });
this.resource("comments", { path: "/comments" }, function() {
this.route("new", { path: "/new" });
});
});
this.route("another", { path: "/another" });
});
In this case the resource comments creates a brand new namespace. This means the resulting routes in this case will be the following. As you can see the Route, Controller and View for the comments resource are not prefixed with the name of the parent route. That means nesting a resource within another resource resets the namespace (= creates a new namespace).
PostsRoute, PostsController, PostsView
PostsIndexRoute, PostsIndexController, PostsIndexView
PostsNewRoute, PostsNewController, PostsNewView
CommentsRoute, CommentsController, CommentsView
CommentsNewRoute, CommentsNewController, CommentsNewView
AnotherRoute, AnotherController, AnotherView
This behaviour is also explained in the Ember Docs.