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关键字：