From 88a35ea1e9456d787cd92f8a8e7b8e234f887eb7 Mon Sep 17 00:00:00 2001 From: Alex Baizeau Date: Thu, 28 Mar 2019 16:22:07 -0700 Subject: [PATCH 1/2] Update docs for the built-in components --- guides/release/routing/query-params.md | 29 +++++++++++++------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/guides/release/routing/query-params.md b/guides/release/routing/query-params.md index b4eef48320..ad30f3651d 100644 --- a/guides/release/routing/query-params.md +++ b/guides/release/routing/query-params.md @@ -83,17 +83,18 @@ With this code, we have established the following behaviors: full router transition (i.e. it won't call `model` hooks and `setupController`, etc.); it will only update the URL. -### link-to Helper +### LinkTo component -The `link-to` helper supports specifying query params using the -`query-params` subexpression helper. +The `` component supports specifying query params using the `@query` +argument, along with the `{{hash}}` helper ```handlebars // Explicitly set target query params -{{#link-to "posts" (query-params direction="asc")}}Sort{{/link-to}} +Sort // Binding is also supported -{{#link-to "posts" (query-params direction=this.otherDirection)}}Sort{{/link-to}} +Sort + ``` In the above examples, `direction` is presumably a query param property @@ -101,7 +102,7 @@ on the `posts` controller, but it could also refer to a `direction` property on any of the controllers associated with the `posts` route hierarchy, matching the leaf-most controller with the supplied property name. -The `link-to` helper takes into account query parameters when determining +The `` component takes into account query parameters when determining its "active" state, and will set the class appropriately. The active state is determined by calculating whether the query params end up the same after clicking a link. You don't have to supply all of the current, @@ -128,7 +129,7 @@ this.transitionTo('/posts/1?sort=date&showDetails=true'); ### Opting into a full transition -When you change query params through a transition (`transitionTo` and `link-to`), +When you change query params through a transition (`transitionTo` and ``), it is not considered a full transition. This means that the controller properties associated with the query params will be updated, as will the URL, but no `Route` method hook like `model` or `setupController` will be called. @@ -189,7 +190,7 @@ export default class ArticlesRoute extends Route { } ``` -This behavior is similar to `link-to`, +This behavior is similar to ``, which also lets you opt into a `replaceState` transition via `replace=true`. ### Map a controller's property to a different query param key @@ -259,10 +260,10 @@ This affects query param behavior in two ways: ### Sticky Query Param Values The query params are defined per route/controller. They are not global to the app. -For example, if a route `first-route` has a query param `firstParam` associated with it and we try to navigate to `first-route` by using `link-to` helper from a different route `second-route`, like in the following handlebar template, the `firstParam` will be omitted. +For example, if a route `first-route` has a query param `firstParam` associated with it and we try to navigate to `first-route` by using `` component from a different route `second-route`, like in the following handlebar template, the `firstParam` will be omitted. ```handlebars -{{#link-to "first-route" (query-params secondParam="asc")}}Sort{{/link-to}} +Sort ``` @@ -279,9 +280,9 @@ and then navigate to `/potatoes` and filter by `"worst"`, then given the following nav bar links: ```handlebars -{{#link-to "team" "badgers"}}Badgers{{/link-to}} -{{#link-to "team" "bears"}}Bears{{/link-to}} -{{#link-to "team" "potatoes"}}Potatoes{{/link-to}} +Badgers +Bears + ``` the generated links would be: @@ -298,7 +299,7 @@ it is stored and tied to the model loaded into the route. If you wish to reset a query param, you have two options: 1. explicitly pass in the default value for that query param into - `link-to` or `transitionTo`. + `` or `transitionTo`. 2. use the `Route.resetController` hook to set query param values back to their defaults before exiting the route or changing the route's model. From 9469ad069a37e4acf8652787ebc776f276a9cd56 Mon Sep 17 00:00:00 2001 From: Alex Baizeau Date: Fri, 29 Mar 2019 07:40:11 -0700 Subject: [PATCH 2/2] Use for consistency --- guides/release/routing/query-params.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/guides/release/routing/query-params.md b/guides/release/routing/query-params.md index ad30f3651d..a1cc5604de 100644 --- a/guides/release/routing/query-params.md +++ b/guides/release/routing/query-params.md @@ -83,7 +83,7 @@ With this code, we have established the following behaviors: full router transition (i.e. it won't call `model` hooks and `setupController`, etc.); it will only update the URL. -### LinkTo component +### component The `` component supports specifying query params using the `@query` argument, along with the `{{hash}}` helper @@ -102,7 +102,7 @@ on the `posts` controller, but it could also refer to a `direction` property on any of the controllers associated with the `posts` route hierarchy, matching the leaf-most controller with the supplied property name. -The `` component takes into account query parameters when determining +The `` component takes into account query parameters when determining its "active" state, and will set the class appropriately. The active state is determined by calculating whether the query params end up the same after clicking a link. You don't have to supply all of the current,