4.2 Routing--defining Your Routes

I. Overview

1. When the application starts, the router is responsible for displaying the template, loading the data, and also setting the state of the application. This is done by matching the current URL to the routes you defined.

2. The map method in Ember app router can be called to define URL mappings. When you call Map , you should pass a function that will be called and this will be set to an object that you can use to create the route.

App/router.js

Router.map (function() {  this. Route (' about ', {path: '/about ' });    this. Route (' Favorites ', {path: '/favs ' );});

• Now when the user accesses /about, Ember.js will render the about template. Accessing/favs will render the Favorites template.

3. Be careful! You will get some default routes:route:application and route:index (the corresponding path is "/").

If the path name is the same as the route name, you can omit the path to write only the route name, example:

App/router.js

Router.map (function() {  this. Route (' about ');    this. Route (' Favorites ', {path: '/favs ' );});

In your template, you can use {{link-to}} to jump between routes, using the same name as the routing method provided (for example/, the name is Inde).

{{#link-to ' index '}} <  class= "logo">{{/link-to}}<nav>    {{#link-to ' about '}}about{{/link-to}}  {{#link-to ' Favorites '}}favorites{{/link-to}} </ nav >

{{link-to}} also adds an active class that points to the currently active route.

4. You can customize the behavior for a route by creating a Ember.route subclass. For example, to customize what should happen when a user accesses "/", create a route:index:

App/routes/index.js

default Ember.Route.extend ({  Setupcontroller (Controller) {    //  Set The Indexcontroller ' s ' Title '    controller.set (' title ', ' My App ');}  );

For the index template , Controller:index is the starting context. Now that you have set the title, you can use the following template:

<!---<H1>{{title}}</ H1 >

(If you don't explicitly define controller:index, Ember.js will automatically generate for you.) ）

5. Ember.js the names of routes and controllers according to the name you pass to This.route .

URL	Route Name	Controller app/controllers/	Route app/routes/	Template app/templates/
/	index	?index.js	?index.js	?index.hbs
/about	about	?about.js	?about.js	?about.hbs
/favs	favorites	?favorites.js	?favorites.js	?favorites.hbs

Second, Nested Routes

You can define a nested routesby passing it to This.route a callback function.

App/router.js

Router.map (function() {  thisfunction()}    {this. Route (' new ');  });

This router creates these routes:

URL	Route Name	Controller app/controllers/	Route app/routes/	Template app/templates/
/	index	?index.js	?index.js	?index.js
N/A	posts	?posts.js	?posts.js	?posts.hbs
/posts	Posts.index	? Posts.js Posts/index.js	? Posts.js Posts/index.js	? Posts.hbs Posts/index.hbs
/posts/new	posts.new	? Posts.js Posts/new.js	? Posts.js Posts/new.js	? Posts.hbs Posts/new.hbs

• The name of a nested routine consists of its ancestors. If you want to switch to a route (via transitionto or {{#link-to}}), make sure to use the full name of the route (posts.new or new).
• That is, switching to posts or creating a link to posts is equivalent to switching to posts.index or linking to Posts.index.
• Access/Renders the index template the same as you would like.
• Access to /posts can be a little different. It will render the posts template first. It then renders the posts/index template in the outlet of the posts template.
• Finally, accessing /posts/new will render the posts template First, and then the posts/new template will be rendered in its outelet .

Third, resetting Nested Route Namespace

When you embed a routine, it may be advantageous to self-route without inheriting the ancestor's name. This allows you to refer to and reuse a given route, and also keep the class name shorter. This is equivalent to the current behavior of the deprecated this.resource () function.

You can use the resetnamespace:true option to reset the current "namespace":

App/roputer.js

Router.map (function() {  thisfunction()}    {this. Route (' edit ');      This true function () {      this. Route (' new ');});})  ; 

This router creates 5 routes:

/	index	app/controllers/index	app/routes/index	app/templates/index
N/A	post	app/controllers/post	app/routes/post	app/templates/post
/post/:post_id/2	post.index	app/controllers/post/index	app/routes/post/index	app/templates/post/index
/post/:post_id/edit	post.edit	app/controllers/post/edit	app/routes/post/edit	app/templates/post/edit
N/A	comments	app/controllers/comments	app/routes/comments	app/templates/comments
/post/:post_id/comments	comments.index	app/controllers/comments/index	app/routes/comments/index	app/templates/comments/index
/post/:post_id/comments/new	comments.new	app/controllers/comments/new	app/routes/comments/new	app/templates/comments/new

• The comments template will be loaded in the outlet of the post . All templates in comments will be loaded in the comments outlet .
• For Comments Resources, the Route,coutroller and view class names do not have a post prefix.

Four, Multi-word Model Names

For multi-word models all names are the hump except for dynamic fields. For example, a model named BigMac will have one such path /bigmacs/:big_mac_id, the route is named BigMac, The template is named bigmac.

V. Dynamic Segments

1. One of the responsibilities of the routing processor is to convert a URL into a model.

For example, if our route is This.route (' posts '), our route processor will be like this:

App/routes/posts.js

default Ember.Route.extend ({  model () {    return $.getjson ("/url/to/some/posts.json");  }});

The posts template will be subject to any list that can be posts as its context.

Thinking that /posts represents a complex frontal model, we don't need any additional information to understand what to retrieve. However, if you need a route that represents a single post, we will not want to hardcode every possible post in the router.

2. Enter the dynamic field.

A dynamic field is a part of a URL that starts with : an identifier that is immediately followed by:

App/router.js

Router.map (function() {  this. Route (' posts ');    this. Route (' Post ', {path: '/post/:p ost_id ' );});

App/routes/post.js

default Ember.Route.extend ({  model (params) {    return $.getjson ("/url/to/some/posts/" + params.post_id + ". JSON");}  );

If the ID attribute is not in the URL, you should define a serialization method defined in the route:

App/router.js

Router.map (function() {  this. Route (' Post ', {path: '/posts/:p ost_slug ' );}); 

App/routes/post.js

default Ember.Route.extend ({  model (params) {    // The server returns ' {slug: ' foo-post '} '     return ember.$.getjson ('/posts/' + params.post_slug);  },  serialize (model) {     // This would make the URL '/posts/foo-post '    return {post_slug:model.get (' slug ')};}  );

This default serialize method inserts the ID of the model into the dynamic field of the route. (e.g. :p ost_id)

Vi. Initial Routes (initial)

Some of the routes in the application are immediately available:

• When your app launches for the first time, it enters route:application. It renders the application template.
• Route:index is the default route, and when the user accesses / , the index template will be rendered (unless/already overridden by your custom route).
• These routes are part of every application, so you don't have to specify them in your app/router.jsi .

Vii. wildcard/globbing Routes (wildcard character)

You can define a wildcard route, which can match more routes. For example, when a user enters an incorrect URL that does not match your app, you need a catch-all route.

App/router.js

Router.map (function() {  this. Route (' Catchall ', {path: '/*wildcard' );}); 

For example, all routes have a dynamic field, and you must provide a context when you use {{link-to}} or transitionto programming to enter the route.

App/routes/application.js

default Ember.Route.extend ({  actions: {    error () {      this. Transitionto (' catchall ', ' Application-error ');}}  );

With this code, if the error bubbles to the application's route, your app will go into the catchall route and display the /application-errorin the URL.

4.2 Routing--defining Your Routes