4.9 Routing--Query Parameters

I. Overview

1. The query parameter in the URL is an optional key-value pair, which appears on the right side of the. For example, the following URL has two query parameters,sort and page, and the corresponding values are ASC and 2, respectively.

example:http://example.com/articles?sort=asc&page=2

2. The Query params allows additional application state to be serialized into URLs that cannot fit into the URL path (for example, anything on the left). Common use case query parameters include: Current page numbers in the paging collection, filter criteria, or sorting criteria.

Second, specifying Qyery parameters

1. The query parameters are declared in the routing driver controller. For example, to configure query parameters activity in articles routing, they must be alive in controller:articles .

2. Adding a category query parameter will filter out all articles that are not categorized as popular, and we specify ' category ' as one of the query parameters for controller:article :

App/controller/articles.js

default Ember.Controller.extend ({  queryparams: [' Category '],  null});

• This sets a binding for the category query parameter in the URL and the category property in controller:articles . In other words, once you enter the articles route, any changes to the category query parameter in the URL will update the controller:articles Category property, and vice versa.

3. Now we just need to define a computed property for our category filter array,articles will render:

App/controllers/articles.js

ExportdefaultEmber.Controller.extend ({queryparams: [' Category '], Category:NULL, filteredArticles:Ember.computed (' Category ', ' model ',function() {    varCategory = This. Get (' category '); varArticles = This. Get (' model '); if(category) {returnArticles.filterby (' Category ', category); } Else {      returnarticles; }  })});

Using the code above, we have established the following actions:

• If the user navigates to /articles, thecategory will be null, so the articles is not filtered back.
• If the user navigates to /articles?category=recent, thecategory will be set to "recent", so articles will be filtered.
• Once in the articles route, any change to the category attribute incontroller:articles causes the URL update query parameter to be generated. By default, a query parameter property change does not return a jump to the entire router (it does not call back to model hooks and setupcontroller), it simply updates the URL.

Third, link-to Helper

1. The link-to helper supports specifying query parameters through the subexpression helper query-params.

Explicitly set target query params{{#link-to ' posts ' (Query-params direction= "ASC")}}sort{{/link-to}}//Binding is ALS o supported{{#link-to ' posts ' (Query-params direction=otherdirection)}}sort{{/link-to}}

In the above example,direction must be a query parameter attribute in controller:post , but it can be any of the controllers associated with the post routing hierarchy The direction property that matches the innermost controller (Leaf-most Controller) with the provided property name.

2. link-to Helper When determining the "active" state, the query parameters are considered and the appropriate classes are set. The activation status is the final decision after clicking on a link by calculating the query parameters.

You do not have to provide all the current, active query parameters are correct.

Iv. Transitions to

1. Route#transitionto and Controller#transitiontoroute accept a final parameter, which is a key of Queryparams the object.

App/routes/some-route.js

 This true }}); this. Transitionto (' posts ', {queryparams: {sort: ' title '}}); // If you just want to transition the query parameters without changing the route this. Transitionto ({queryparams: {direction: ' ASC '}});

2. You can also add query parameters for URL transitions:

this. Transitionto ("/posts/1?sort=date&showdetails=true");

V. Opting into a full transition (choose to enter a complete jump)

1. Parameters supplied to transitionto or link-to only correspond to a change in the value of the query parameter, not a change in the routing hierarchy, it is not considered a complete jump, which means that the model and Setupcontroller 's hooks default is not returned, but only the controller properties will be updated with a new query parameter, as is the URL.

2. However, some query parameters change the necessary loading data from the server, in which case it is desirable to choose to enter a full jump. When a controller's query parameter properties change, choose to enter a full jump, you can use the relevant controller's route in the optional configuration queryparams, and set the query parameters of the Refreshmodel the configuration property is true:

App/routes/articles.js

ExportdefaultEmber.Route.extend ({queryparams: {category: {refreshmodel:true}}, Model (params) {//This gets called upon entering ' articles ' route    //for the first time, and we opt into refiring it upon    //query param changes by setting ' Refreshmodel:true ' above.    //params has format of {category: "Somevalueorjustnull"},    //which we can just forward to the server.    return  This. Store.query (' articles ', params); }});

App/controllers/articles.js

default Ember.Controller.extend ({  queryparams: [' Category '],  null});

VI. Update URL with replacestate instead

By default, Embe will use pushstate to update the URL in the address bar to change the query parameter properties of the corresponding controller, but if you want to use replacestate instead (prevent adding additional entries to the browser's history), you can specify it in the queryparams config hash of the route. Continue with the above example:

App/routes/articles.js

default Ember.Route.extend ({  queryparams: {    Category: {      True}}}  );

Note that the name of this configuration property and its default value of false and link-to have a little like, it also allows you to enter replacestate jump by replace=true selection.

MAP a controller ' s property to a different query param key

1. By default, the query property that specifies foo as a controller will bind a query parameter, and its key is foo, for example? foo=123. You can also map a controller's properties to a different query parameter key by using the following configuration syntax:

App/controllers/articles.js

default Ember.Controller.extend ({  queryparams: {    "articles_category"  },    Null});

This will cause the controller:articles property category to change to update the query string articles_category, and vice versa.

2. Note that additional customization is required, and query parameters can be supplied with the strings in the query parameter array.

App/controllers/article.js

default Ember.Controller.extend ({  "page", "filter", {    "articles_category"  }],   null,  1,  "recent"});

Viii. Default values and deserialization

In the following example, the controller's query parameter property page is considered another default value of 1:

App/controllers/articles.js

default Ember.Controller.extend ({  ' page ',  1});

This affects the behavior of query parameters in two ways:

• The value of the query parameter is converted to the same data type as the default value, for example a URL from /?page=3 to /?page=2 will be set controller:articles page The property is the number 2, not the string "2". The same applies to the default Boolean value.
• When a Congroller query parameter property is currently set to its default value, the value is not serialized back into the URL. So, in the example above, if the page is 1,url will be similar to /articles, but once the value of the page is set to 2,url will become /articles?page=2 .

Ix. Sticky query param values (top query parameter value)

1. By default, the query parameter value in ember is "sticky" because if you change a query parameter and then leave and re-enter the route, the new value of the query parameter is retained (not reset to the default value). This is a particularly handy default for maintaining sort/filter parameters when you navigate back and forth between routes.

2. In addition, these sticky query parameter values are remembered/restored according to the load into the path model. So suppose a team route has a dynamic field /:team_name and Controlle the query parameter "filter" if you navigate to /badgers and pass " Rookies "Filter, then navigate to /bear and Filter By" best ", then navigate to /potatoes and Filter By" lamest ", then the following is the navigation bar link:

{{#link-to ' team ' Badgers '}} badgers{{/link-to}}{{#link-to ' team ' bears '   }}bears{{/link-to}}{{#link-to ' team ' potatoes '}}potatoes{{/ Link-to}}

The generated link is:

<ahref= "/badgers?filter=rookies">Badgers</a><ahref= "/bears?filter=best">Bears</a><ahref= "/potatoes?filter=lamest">Potatoes</a>

This means that once the query parameters are changed, it is stored and tied to the model of the loaded path.

3. If you want to reset a query parameter, you have two options:

• Explicit incoming default values to link-to or transitionto . The
• uses the route.resetcontroller hook to set the query parameter values back to their existing routes or to the default values before the routing model changes.
• In the following example, the controller's page query nibble is set to 1 and is also used for the articlesroute  model before redirection. As a result, all routes that point back to the exit will use the value 1 of the new setting as the value of the page query parameter.
• app/routes/articles.js

•  export default   Ember.Route.extend ({Resetcontroller (Controller, isexiting, transition) { if< /span> (isexiting) { //  Isexiting would is false if only the route's model was changing  controller.set (' page ', 1);
  }  }});

4. In some cases, you may not want the value of the sticky query parameter to act on the routing model, but prefer to reuse the value of a query parameter even as a model of a route changes. This can be achieved by setting the scope option in the queryparams config hash of the controller:

App/controllers/articles/js

default Ember.Controller.extend ({  queryparams: [{    showmagnifyingglass: {      "Controller"    }  }]});

5. The following describes how you can override a single controller query parameter property of scope and query parameter URL key:

App/controllers/articles.js

default Ember.Controller.extend ({  "page", "Filter",    {      showmagnifyingglass: {        " Controller ",        " Glass ",      }    }  ]});

4.9 Routing--Query Parameters