Ember Query Params

Introduction

In an effort to help your users move seamlessly across your application, query parameters are a developer’s best friend. In short, query params are optional, key-value pairs that are appended to a URL and preceded by a (?) question mark. Query params are commonly used in cases of pagination, sorting, or filtering, and allow us to serialize our state into the URL.

Query params can be used in both interactions with the API, and within the URL.

Let’s take a closer look.

Defining Query Parameters

According to Ember JS Guides, query params are declared on route-driven controllers, meaning that the query params can only be active if they are defined within the controller.

In the controller, you must define the parameter at the top of the file with a key of queryParams, e.g. queryParams: [‘page’]. Below the declaration, you must set the query param to its default value, e.g. page: 1.

In this way, the query parameter in the URL and the query parameter declared in the controller are bound. A query parameter change will not cause a transition, as it won’t call the model or setupController; only the URL is updated.

Once a given route has been entered, changes in its query parameters in the URL will update…