Nested routes will now create a namespace for their child routes to live under:
App.Router.map(function(match) {
match("/blogs").to("blogs", function(match) {
match("/favorites").to("favorites");
match("/:blog_id").to("blog", function(match) {
match("/info").to("info");
match("/posts").to("posts");
})
})
});
The blogs
route maps to:
blogs.handlebars
App.BlogsRoute
App.BlogsController
The blogs.favorites
route, as a child of the blogs
nesting, maps to:
blogs/favorites.handlebars
App.Blogs.FavoritesRoute
App.Blogs.FavoritesController
The blog
route, starting a new group, creates a new namespace at the top
level:
blog.handlebars
App.BlogRoute
App.BlogController
The blog.info
route, as a child of the blog
nesting, maps to:
blog/info.handlebars
App.Blog.InfoRoute
App.Blog.InfoController
Similarly, the blog.posts
route, as a child of the blog
nesting, maps to:
blog/posts.handlebars
App.Blog.PostsRoute
App.Blog.PostsController
Down the hierarchy, there will always only be a single level of nesting. Routes that begin a nesting create namespaces, and standalone routes inside of the nesting use the namespace.
Note that you do not need to create the namespace directly; Ember will create it for you because of the nested route definition.
All nested routes get a default index
sub-route:
App.Router.map(function(match) {
match("/posts").to("posts", function(match) {
match("/:post_id").to("post");
});
});
The above description creates a posts.index
route automatically. If a user
navigates to /posts
, the optional posts/index
template will be rendered
by default.
A link to posts
will work, and automatically generate a transition to
posts.index
.
This makes refactoring into nested routes pretty nice. Let's say you start here:
App.Router.map(function(match) {
match("/posts").to("posts");
});
Now, let's say you want to create a nested comments
inside of posts
:
App.Router.map(function(match) {
match("/posts").to("posts", function(match) {
match("/comments").to("comments");
});
});
Links to posts
will continue to work. Going to /posts
will render the
posts template, and leave its outlet empty.
You could also explicitly create a posts/index
template or a
Posts.IndexRoute
if you wanted to have specific behavior for the root of
/posts
.
It's analogous to the index.html
page if you go to a directory in a static
web server.
You should never define App.Router =
anymore. Ember creates App.Router
for
you when you create an Application
.
If you want to configure the router, use reopen
:
Ember.Router.reopen({
location: 'history'
});
I'm also curious about the answer to lukemelia's second question. In our app we will have separate interfaces for admins and regular users, so there will be for example an adminRole.items.index route as well as a userRole.items.index route, which under this scheme would both fall under the App.Items namespace.
Although perhaps a better solution in this case is to have two separate Ember apps sharing models (?), I can still think of reasonable cases where there could be conflicting namespaces.
Easy-ish solution: allow the level of nesting to be specified as a parameter, rather than be hardcoded to 2?