ember 查询参数

　　ember的查询参数是可选的键值对，一般显示在URL的 ？右侧。例如，在如下URL中，有两个查询参数：sort和page，分别具备质ASC和2：

　　

　　查询参数容许将其余应用程序状态序列化到URL中，不然该状态不能适合URL的路径（即，？左边的全部内容）。查询参数的常见用例包括在分页集合中表示当前页码，过滤条件或排序条件。在Web开发中，如上所述，查询参数在URL中使用，但也能够在检索数据的API请求中使用。Ember将这些视为两个不一样的概念。本节介绍如何在Ember中使用路由查询参数。请参阅查找记录，以了解如何将查询参数应用于Ember Data中的API请求。

　　指定查询参数

　　查询参数在路由驱动的控制器上声明。例如，要配置在 articles 路由中处于活动状态的查询参数，必须在 controller:articles 上声明它们。

　　要添加 category 查询参数以过滤掉全部未归类为热门的文章，咱们将“ category”指定为controller:articles控制器的 queryParams之一 ：

　　

 

　　这将在URL中的 category 查询参数与 controller:articles 上的category属性之间创建绑定，换句话说，输入文章路径后，URL中类别查询参数的任何更改都会更新controller：articles上的category属性。换句话说，输入 articles 路径后，URL中 category 查询参数的任何更改都会更新controller: articles 上的category属性，反之亦然。请注意，您不能将queryParams绑定到计算属性，它们必须是值。

　　如今，咱们须要为类别过滤数组定义一个计算属性，该属性将由 articles 模板呈现。

 　　

 　　使用此代码，咱们创建了如下行为：

1. 若是用户导航到/ articles，category将为null，所以不会过滤文章。
2. 若是用户导航到/ articles？category = recent，则category将设置为“ recent”，所以将对文章进行过滤。
3. 一旦进入article路由，对controller：articles上category属性的任何更改都将致使URL更新查询参数。默认状况下，查询参数属性更改不会引发路由器的彻底转换（即，不会调用model 挂钩和setupController等）；只会更新网址。

　　LinkTo组件

　　LinkTo组件支持使用query-params子表达式帮助器指定查询参数。

// Explicitly set target query params
<LinkTo @route="posts" @query={{hash direction="asc"}}>Sort</LinkTo>

// Binding is also supported
<LinkTo @route="posts" @query={{hash direction=this.otherDirection}}>Sort</LinkTo>

　　在以上示例中，direction 大概是 posts 控制器上的查询参数属性，但它也能够引用与 posts 路线层次结构关联的任何控制器上的Direction属性，从而使 leaf-most 控制器与提供的属性名称匹配。

　　<LinkTo>组件在肯定其 “active” 状态时会考虑查询参数，并将适当地设置该类。经过计算单击连接后查询参数是否最终相同来肯定活动状态。您没必要提供全部当前的活动查询参数便可。

transitionTo

　　Route＃transitionTo和Controller＃transitionToRoute接受最终参数，该参数是带有queryParams键的对象。

this.transitionTo('post', object, { queryParams: { showDetails: true }});
this.transitionTo('posts', { queryParams: { sort: 'title' }});

// if you want to transition the query parameters without changing the route
this.transitionTo({ queryParams: { direction: 'asc' }});

　　您还能够向URL过渡添加查询参数：

　　

 Opting into a full transition

　　经过过渡（transitionTo和<LinkTo>）更改查询参数时，它被视为不完整过渡。这意味着与查询参数关联的控制器属性以及URL将被更新，可是不会调用诸如model或setupController之类的Route方法钩子。

　　若是须要更改查询参数以触发彻底转换，并所以使方法hooks，则能够在Route上使用可选的queryParams配置hash。若是您具备category查询参数，而且但愿它触发模型刷新，则能够以下设置：

　　

Update URL with replaceState instead

 　　默认状况下，Ember将使用pushState更新地址栏中的URL，以响应控制器查询参数属性的更改。若是您想使用replaceState来防止将其余项添加到浏览器的历史记录中，则能够以下指定：

　　

　　此行为相似于<LinkTo>，它也使您能够经过replace = true选择进入replaceState转换。

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

默认状况下，将foo指定为控制器的查询参数属性将绑定到键为foo的查询参数，例如 ？foo = 123。您还可使用如下配置语法将控制器属性映射到其余查询参数键：

　　

 

 

 　　这将致使对controller：articles的category属性的更改，以更新articles_category查询参数，反之亦然。 能够提供须要额外自定义的查询参数以及queryParams数组中的字符串。

　　

 

 

 　Default values and deserialization

　　在如下示例中，控制器查询参数属性页被认为具备默认值1。

　　

 

 

 　　这以两种方式影响查询参数行为：

1. 查询参数值强制转换为与默认值相同的数据类型，例如从/？page = 3更改成/？page = 2的URL将把controller：articles的page属性设置为数字2，而不是字符串“ 2”。布尔默认值也是如此。若是默认值为数组，则将使用JSON.parse解析字符串。
2. 当前控制器的查询参数属性设置为其默认值时，该值将不会序列化到URL中。所以，在上面的示例中，若是page为1，则URL可能看起来像/ articles，可是一旦有人将控制器的page值设置为2，URL就会变成/ articles？page = 2

Sticky Query Param Values（粘性查询参数值）

　　查询参数是按 route/controller 定义的。它们对应用程序不是全局的。例如，若是某条路线的 first-route 具备与之关联的查询参数 firstParam，而且咱们尝试使用另外一条路线的第二条路线中的<LinkTo>导航至first-route，如如下handlebar模板中所示，则firstParam将为省略

<LinkTo @route="first-route" @query={{hash secondParam="asc"}}>Sort</LinkTo>

　　默认状况下，Ember中的查询参数值是“sticky”的，由于若是您对查询参数进行更改，而后离开并从新输入路由，则该查询参数的新值将被保留（而不是重置为默认值））。当在路线之间来回导航时，这对于保留 sort/filter 参数特别方便。

　　此外，这些粘性查询参数值会根据加载到路线中的模型进行记忆/恢复。所以，给定具备动态段 /:team_name 和控制器查询参数“ filter”的 team 路线，若是您导航至/ badgers并按“ rookies”进行过滤，则导航至/ bears并按“ best”进行过滤，而后导航至 /potatoes ，而后按“worst”进行过滤，而后提供如下导航栏连接：

　　

 

 

 　　生成的连接将是：

　　

 

 　　这说明一旦更改了查询参数，它就会被存储并绑定到加载到路径中的模型上。

　　若是您但愿重置查询参数，则有两个选择：

1. 将该查询参数的默认值显式传递给<LinkTo 或 transitionTo。
2. 在退出路线或更改路线模型以前，请使用Route.resetController hook将查询参数值设置回其默认值。

　　在如下示例中，控制器的页面查询参数被重置为1，同时范围仍然限于转换前的ArticlesRoute模型。结果是，全部指向退出路由的连接都将使用新重置的值1做为页面查询参数的值。

import Route from '@ember/routing/route';

export default Route.extend({
  resetController(controller, isExiting, transition) {
    if (isExiting) {
      // isExiting would be false if only the route's model was changing
      controller.set('page', 1);
    }
  }
});

　　在某些状况下，您可能不但愿将粘性查询参数的值限制在路由模型的范围内，而是宁愿在路由模型发生更改时重用查询参数的值。这能够经过在控制器的queryParams配置hash中将scope选项设置为“ controller”来实现：

　　

 

 　　如下内容演示了如何覆盖单个控制器查询参数属性的做用域和查询参数URL关键字：