Query Parameters

Query параметры в Ember.js представляют собой механизм передачи данных в URL с целью модификации состояния приложения, без необходимости перезагружать страницу. В отличие от маршрутов, которые используют части пути (path segments) для передачи данных, query параметры присутствуют в строке запроса URL и обычно используются для фильтрации или пагинации данных, а также для передачи параметров, которые могут изменяться без изменения основной структуры URL.

Основы работы с query параметрами

В Ember.js query параметры задаются в маршрутах через объект queryParams. Это позволяет легко отслеживать изменения значений параметров и обновлять состояние модели или компонента в ответ на эти изменения. Каждый параметр указывается в маршруте и может быть связан с конкретным свойством модели или компонентом. Эти параметры отображаются в URL в виде пары “ключ-значение”, например: /products?page=2&sort=price.

Для начала работы с query параметрами в Ember.js необходимо:

  1. Определить параметры в маршруте.
  2. Отслеживать изменения параметров.
  3. Сохранять изменения параметров в URL без перезагрузки страницы.

Определение query параметров в маршруте

Для того чтобы установить query параметры в маршруте, нужно использовать ключ queryParams в объекте маршрута. Каждый query параметр может быть связан с моделью маршрута или компонентом.

Пример простого маршрута с query параметрами:

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

export default class ProductsRoute extends Route {
  queryParams = {
    page: {
      refreshModel: true
    },
    sort: {
      refreshModel: true
    }
  };

  model(params) {
    // params.page и params.sort теперь доступны
    return this.store.query('product', {
      page: params.page,
      sort: params.sort
    });
  }
}

В данном примере маршруту ProductsRoute добавлены два query параметра: page и sort. Эти параметры будут переданы в модель с помощью метода this.store.query, который обращается к API для получения данных в зависимости от значений этих параметров.

  • page: номер страницы для пагинации.
  • sort: параметр для сортировки.

Ключ refreshModel: true гарантирует, что при изменении этих параметров будет повторно загружена модель маршрута.

Обработка query параметров в компонентах

Для компонента можно привязать query параметры с помощью декоратора @queryParam. Это позволяет компоненту автоматически обновляться при изменении значений этих параметров.

Пример:

import Component from '@glimmer/component';
import { queryParam } from '@ember/routing/attrs';

export default class ProductListComponent extends Component {
  @queryParam page = 1;
  @queryParam sort = 'price';
}

В этом примере параметры page и sort привязываются к компоненту. Это позволяет компоненту отслеживать изменения этих параметров и изменять состояние интерфейса на основе новых значений.

Привязка параметров в шаблонах

В Ember.js query параметры могут быть связаны с элементами интерфейса для изменения состояния через URL. Например, можно создать ссылки, которые изменяют значения query параметров при нажатии.

Пример использования ссылок с query параметрами в шаблоне:

<ul>
  <li>{{#link-to 'products' queryParams.page=1 queryParams.sort='price'}}По цене{{/link-to}}</li>
  <li>{{#link-to 'products' queryParams.page=2 queryParams.sort='rating'}}По рейтингу{{/link-to}}</li>
</ul>

В данном примере ссылки меняют параметры page и sort в URL. При этом маршрут products будет перезагружаться, если параметры изменятся, и модель будет обновлена.

Управление состоянием параметров

С помощью query параметров можно гибко управлять состоянием приложения. Например, изменяя параметры через URL, можно сохранять состояние фильтров, сортировки или пагинации между сессиями пользователя. Также можно использовать эти параметры для сохранения состояния интерфейса, чтобы пользователь мог вернуться к ранее выбранным настройкам.

Для отслеживания изменений параметров в маршруте используется метод setupController, который позволяет обновить состояние модели в зависимости от новых значений query параметров.

Пример обновления состояния модели в зависимости от query параметров:

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

export default class ProductsRoute extends Route {
  queryParams = {
    page: {
      refreshModel: true
    },
    sort: {
      refreshModel: true
    }
  };

  model(params) {
    return this.store.query('product', {
      page: params.page,
      sort: params.sort
    });
  }

  setupController(controller, model) {
    super.setupController(controller, model);
    controller.set('page', this.modelFor('products').page);
    controller.set('sort', this.modelFor('products').sort);
  }
}

Этот код обновляет параметры page и sort в контроллере при изменении значения query параметров в URL. При этом обновляется модель, и контроллер получает актуальное состояние параметров.

Синхронизация с состоянием модели

Иногда возникает необходимость синхронизировать состояние query параметров с внутренним состоянием модели. Для этого можно использовать механизм refreshModel, чтобы параметры автоматически обновляли модель без необходимости перезагружать страницу. Это особенно полезно при реализации пагинации, сортировки или фильтрации.

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

export default class ProductsRoute extends Route {
  queryParams = {
    page: {
      refreshModel: true
    },
    sort: {
      refreshModel: true
    }
  };

  model(params) {
    return this.store.query('product', {
      page: params.page,
      sort: params.sort
    });
  }
}

Когда query параметры изменяются в URL, модель будет обновлена автоматически, и компоненты, связанные с этой моделью, будут перерисованы.

Поддержка URL-состояния

Использование query параметров для управления состоянием URL имеет несколько ключевых преимуществ:

  1. Сохранение состояния: состояние приложения, такое как выбранные фильтры или сортировка, сохраняется в URL, что позволяет пользователю вернуться к предыдущим состояниям.
  2. Навигация через URL: изменения query параметров позволяют пользователям легко делиться ссылками с нужными параметрами или возвращаться к конкретным состояниям приложения.
  3. Легкость тестирования: благодаря использованию URL параметров, можно тестировать различные состояния приложения, просто изменяя параметры URL.

Резюме

Query параметры в Ember.js предоставляют мощный и гибкий механизм для управления состоянием приложения. Использование query параметров позволяет легко сохранять и изменять параметры в URL, что важно для реализации таких функций, как пагинация, сортировка и фильтрация. В комбинации с маршрутизатором и компонентами Ember, query параметры дают разработчикам возможность создать удобное и функциональное приложение с минимальными усилиями.

Оглавление