Как реализовать фильтры без перезагрузки страницы в приложении Rails?

Question

Я пытаюсь реализовать функцию фильтрации в своем приложении Rails, и мне нужны рекомендации / идеи о том, как это сделать.

Я бы хотел иметь возможность фильтровать результаты и отображать их на одной странице (как это делают веб-сайты о путешествиях: skyscanner, liligo и т. Д.). Когда вы ставите флажок на этих сайтах, результаты обновляются сразу.

Вот как должна выглядеть страница: Страница результатов

Моя первоначальная идея заключалась в том, чтобы добавить Eventlisteners в каждое поле и использовать запрос get для получения данных из моего API. Каждый раз, когда флажок ставится, он запускает запрос со всеми параметрами, выбранными пользователем. И тогда он вставит результаты в div рядом с ним. Но делать что-то подобное очень грязно.

Что может быть лучше?

Я видел, что большинство этих сайтов используют React для этого. Это большая помощь для обработки такого рода функции?

Answer 1

Да, на самом деле React кажется мне вполне естественным, поскольку вы можете использовать SetState () без перезагрузки страницы, как описано в документах .

setState () ставит изменения в состояние компонента и сообщает React, что этот компонент и его дочерние элементы должны быть повторно обработаны с обновленным состоянием.Это основной метод, который вы используете для обновления пользовательского интерфейса в ответ на обработчики событий и ответы сервера.

Если вы используете rails, я рекомендую вам использовать Jquery, поэтому воспользуйтесь Ajax и егогибкость,

Answer 2

Не существует «одного правильного способа» добиться этого в реакции. Существует множество шаблонов реакции, но с одной общей идеей - передавать реквизиты (данные, методы) в одном направлении, от родителя к дети.

В простейшем случае вы можете иметь <Results /> (дочерний компонент) в <Filter /> компоненте (родительском). Любое изменение в <Filter /> (флажки) может быть сохранено в состоянии компонента и использовано для извлечения данных. Полученные данные (также сохраненные в состоянии) могут передаваться детям. Упрощенная render функция компонента <Filter /> может выглядеть следующим образом:

render() {
  return (
    <div id="page_layout">
      <div id="filters">
        <input onChange={/* event handler */} />
        <input {/* next filter */} />
      </div>
      <Results data={this.state.results} />
    </div>
  )
}

Использование setState в обработчиках событий приведет к повторной визуализации (просмотр обновления) компонентов <Filter /> и <Results />. Локальное состояние используется для фильтрации почти во всех приложениях, реагирующих на примеры, но обычно с помощью кнопок.

Один обработчик событий может использоваться для всех флажков, выборка может быть [затем] запущена из setState обратного вызова. Использование приставки можно использовать как общее (один источник правды) состояние для обоих (или более) параллельных компонентов (без родителя / потомка) ... вам нужно выучить много шаблонов / методов реакции ... слишком широкий вопрос.

Этот урок может быть хорошим началом, но, конечно, есть несколько отличий. F.E. только один вход, значение используется для выборки напрямую, без сохранения в состоянии.

Answer 3

Вы можете использовать javascript along with jquery, как предложено в этом рельсах

или

Filterrific gem to для фильтров.

Вы можете проверить livedemo из Filterrific.