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關鍵字：