wycats/router-2.1.md Secret

## router-2.1.md

      
    Raw
  

              router-2.1.md
            
          
    Router v2.1 TL;DR

Naming for Nested Routes

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.
Index Routes

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");
});
<!-- index.handlebars -->
<h1>You are at <code>/</code></h1>

{{#linkTo "posts"}}Go to the posts index{{/linkTo}}

<!-- posts.handlebars -->
<ul>
{{#each post in controller}}
<li>{{post.title}}</li>
{{/each}}
</ul>
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");
  });
});
<!-- posts.handlebars -->
<ul>
{{#each post in controller}}
<li>{{post.title}}</li>
{{/each}}
</ul>

{{outlet}}
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.
No More App.Router =

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'
});