Ember. js concept description-Router

User interaction with your application may lead to many different states. The Framework provides useful tools to manage these statuses.

In the framework, each possible status of an application is reflected in the URL, and the router is responsible for managing these statuses. There is a group of routes under the vro. Each route corresponds to a status, that is, a URL.

When your application is started, the router displays the template, loads data, and sets the application status. It matches the current URL to your defined route to complete the work.

3.3.1 configure a vro

App. router. map (function () {this. route ("about", {path: "/about"}); this. route ("favorites", {path: "/favs"}) ;}); when the user accesses/, the Framework renders the index template. Access the/about rendering about template and access the/favs rendering favorites template. If the path is the same as the route name, the path can be omitted. The above example is equivalent to App. router. map (function () {this. route ("about"); this. route ("favorites", {path: "/favs"}) ;}); In your template, you can use {linkTo} to mark the specified route name and navigate between routes. (/The path name is index)

{{# LinkTo "index" }}< imgclass = "logo" >{{/linkTo }}< nav >{{# linkTo "about" }}about {{/linkTo} {# linkTo "favorites"} Favorites {/linkTo }}</nav> for details about {linkTo}, see 3.4.5.

3.3.2 define a route

You can create an Ember. Route subclass to customize the routing behavior. For example, you can customize the behavior when a user accesses/creates an App. indexRoute App. indexRoute = Ember. route. extend ({setupController: function (controller) {// Set the IndexController's 'title' controller. set ('title', "My App") ;}}); IndexController is the preferred context for the index template. Now you have set the title. You can use it in the template.

<! -- Get the title from the IndexController -->

The framework automatically calculates the name of the route, Controller, and template based on the name passed to this. route.

URL
Route Name
Controller
Route
Template
 
/
Index
IndexController
IndexRoute
Index
 
/About
About
AboutController
AboutRoute
About
 
/Favs
Favorites
FavoritesController
FavoritesRoute
Favorites
 

3.3.3 Resources

You can use resources to define a routing group.

Same as this. route. When the path is the same as the Resource Name, the path can be omitted, so the above is equivalent

This router creates four routes

URL
Route Name
Controller
Route
Template
 
/
Index
IndexController
IndexRoute
Index
 
N/
Posts1
PostsController
PostsRoute
Posts
 
/Posts
Posts. index
PostsController
↳ PostsIndexController
PostsRoute
↳ PostsIndexRoute
Posts
↳ Posts/index
 
/Posts/new
Posts. new
PostsController
↳ PostsNewController
PostsRoute
↳ PostsNewRoute
Posts
↳ Posts/new
 

1. The redirection or link to posts will be automatically redirected to posts. index.

Note: If you configure a resource but do not provide a function, the framework will not create a resource. index route. In this case,/resource uses the ResourceRoute, ResourceController, and resource templates. This. resource is equivalent to this. route.

The full name of the ingress embedded in the resource must be added before its name (posts. new is not new ). If you want to jump to a route (either through transitionTo or {# linkTo}), make sure to use the full name (posts. new is not new ).

When accessing/, the index template will be rendered like the rules described above.

Access/posts is somewhat different. The posts template will be rendered first. Then the posts/index template is rendered to the outlet of the posts template.

Accessing posts/new also renders the posts template first. The posts/new template is rendered to the outlet of the posts template.

Note: You should use nouns to represent a resource. The route in a resource uses adjectives or verbs to modify the term.

3.3.4 Dynamic Parameters

Dynamic Parameters start with ":" and follow the parameter name.

App. Router. map (function (){

This. resource ('posts ');

This. resource ('post', {path: '/post/: post_id '});

});

 

App. PostRoute = Ember. Route. extend ({

Model: function (params ){

Return App. Post. find (params. post_id );

},

Serialize: function (post) {return {post_id: post. get ('id ')};}

});
 

The model method of your route transmits the parameter post_id to the model. The serialize method converts Model objects to URL parameters. (For example, when calculating the link of a model ).

Because this mode is common, routes provide default processing.

· If your dynamic parameters end with "_ id", the model method will convert the first part of the post_id parameter to a model class under the namespace of the application (post to App. Post ). Then, call the find method of the class and input the dynamic parameter value.

· The default serialize method assigns values to dynamic parameters using the model id attribute value. Therefore, the above serialize method can be omitted.

3.3.5 nested Resources

You cannot nest routes in routes, but you can nest resources in resources.

This router generates the following routes:

URL
Route Name
Controller
Route
Template
 
/
Index
App. IndexController
App. IndexRoute
Index
 
N/
Post
App. PostController
App. PostRoute
Post
 
/Post/: post_id2
Post. index
App. PostIndexController
App. PostIndexRoute
Post/index
 
/Post/: post_id/edit
Post. edit
App. PostEditController
App. PostEditRoute
Post/edit
 
N/
Comments
App. CommentsController
App. CommentsRoute
Comments
 
/Post/: post_id/comments
Comments. index
App. CommentsIndexController
App. CommentsIndexRoute
Comments/index
 
/Post/: post_id/comments/new
Comments. new
App. CommentsNewController
App. CommentsNewRoute
Comments/new
 

3.3.6 specify a model

If you do not have dynamic parameters, You need to implement the model method by yourself to specify which model is used to associate the matching url.

App. Router. map (function (){

This. resource ('posts ');

});

App. PostsRoute = Ember. Route. extend ({

Model: function (){

Return App. Post. find ();

}

});
 

If dynamic parameters are used, you will want to obtain the model through parameters.

App. Router. map (function (){

This. resource ('post', {path: '/posts/: post_id '});

});

 

App. PostRoute = Ember. Route. extend ({

Model: function (params ){

Return App. Post. find (params. post_id );

}

});
 

Because this mode is too common, the above model method is the default behavior.

For example, if your dynamic parameter is post_id, the framework uses post before _ as the model, that is, App. Post. Unless you override the model method, the route will automatically return App. Post. find (params. post_id ).

3.3.7 set the Controller

In the Framework, the template obtains and displays information from the Controller.

The Framework has two built-in controllers: Ember. ObjectController and Ember. ArrayController. They are easy to use. They represent the attributes of the model and have their own additional attributes, which are finally passed to the template.

In the setupController method, set the content attribute of the Controller to represent the model.

App. Router. map (function (){

This. resource ('post', {path: '/posts/: post_id '});

});

 

App. PostRoute = Ember. Route. extend ({

SetupController: function (controller, model ){

Controller. set ('content', model );

}

});
 

The setupController method receives two parameters. The first parameter is the controller associated with the route, and the second parameter is the model returned by the model method. In the preceding example, the associated controller of PostRoute is an instance of App. PostController.

The default behavior of the setupController method is the above Code. So you can omit the above setupController.

If you do not just want to operate the associated controller, you can use the controllerFor method.

App. PostRoute = Ember. Route. extend ({

SetupController: function (controller, model ){

This. controllerFor ('toppost'). set ('content', model );

}

});
 

 

3.3.8 rendering templates

An important task of routing is to render the specified template to the screen.

By default, the associated template is rendered to the outlet of the nearest parent template, and the associated controller is used.

App. PostsRoute = Ember. Route. extend ({

RenderTemplate: function (controller, model ){

This. render ();

}

});
 

The code containing all parameters is as follows:

App. PostsRoute = Ember. Route. extend ({

RenderTemplate: function (controller, model ){

This. render ('posts', {// Template Name. The default value is the associated posts.

Into: undefined, // parent template, no is undefined

Outlet: 'main', // outlet name. The default value is main, which is the unique outlet in the parent template.

Controller: 'posts' // The default controller is PostsController. You can directly transmit the controller instance.

});

}

});
 

 

3.3.9 redirection

If you first redirect to another route, you need to implement the redirect method.

App. Router. map (function (){

This. resource ('posts ');

});

 

App. IndexRoute = Ember. Route. extend ({

Redirect: function (){

This. transitionTo ('posts ');

}

});
 

You can also add redirection conditions based on the application status.

App. Router. map (function (){

This. resource ('topcharts', function (){

This. route ('choose', {path :'/'});

This. route ('albums ');

This. route ('songs ');

This. route ('artists ');

This. route ('playlists ');

});

});

App. TopChartsChooseRoute = Ember. Route. extend ({

Redirect: function (){

Var lastFilter = this. controllerFor ('application'). get ('lastfilter ');

This. transitionTo ('topcharts. '+ lastFilter | 'songs ');

}

});

// Superclass to be used by all of the filter routes below

App. FilterRoute = Ember. Route. extend ({

Enter: function (){

Var controller = this. controllerFor ('application ');

Controller. set ('lastfilter', this. templateName );

}

});

App. TopChartsSongsRoute = App. FilterRoute. extend ();

App. TopChartsAlbumsRoute = App. FilterRoute. extend ();

App. TopChartsArtistsRoute = App. FilterRoute. extend ();

App. TopChartsPlaylistsRoute = App. FilterRoute. extend ();
 

If the redirect Hook method of the route is not redirected to another route, the remaining hook methods (model, setupController, renderTemplate) will still be executed.

3.3.10 specify the url type

By default, the router uses the hash value of the browser url to load the initial state of the application, and the url address changes to the synchronous state. Currently, these are implemented through hashchange in the browser.

Look at the vro below. When you access/#/posts/new, it is associated with the route entry to posts. new.

App. Router. map (function (){

This. resource ('posts', function (){

This. route ('new ');

});

});
 

If you first use the address/posts/new to replace/#/posts/new, you need to tell the route to use the browser's history API.

App. Router. reopen ({

Location: 'History'

});
 

If you do not want the browser url to interact with your application, you can completely disable the location API. This helps you test the application status, or use a router to manage the application status without changing the url (for example, when embedding an application into a larger page ).

App. Router. reopen ({

Location: 'none'

});