J'essaie de mettre en œuvre une fonction de filtrage dans mon application Rails et j'ai besoin de recommandations / d'idées sur la façon de le faire.
Je voudrais pouvoir filtrer les résultats et les afficher sur la même page (comme le feraient les sites Web de voyage: skyscanner, liligo, etc.). Lorsque vous cochez une case sur ces sites, les résultats sont immédiatement mis à jour.
Voici à quoi ressemblerait la page: Page de résultats
Mon idée initiale était d'ajouter des Eventlisteners à toutes les boîtes et d'utiliser get request pour récupérer les données de mon api. Chaque fois qu'une case est cochée, cela déclenche une demande avec tous les paramètres sélectionnés par l'utilisateur. Et puis il insérerait les résultats dans le div à côté. Mais c'est vraiment compliqué de faire quelque chose comme ça.
Quelle pourrait être une meilleure option?
J'ai vu que la plupart de ces sites utilisent React pour ce faire. Est-ce d'une grande aide pour gérer ce type de fonctionnalité?
3 Réponses :
Vous pouvez utiliser javascript avec jquery comme suggéré dans ce rails coulés
ou
Filterrific pour les filtres.
Vous pouvez vérifier livingemo de Filterrific .
Oui, en fait React me semble assez naturel, puisque vous pouvez utiliser SetState () sans recharger la page, comme décrit dans le docs .
setState () met en file d'attente les modifications apportées à l'état du composant et indique à React que ce composant et ses enfants doivent être rendus avec l'état mis à jour. Il s'agit de la principale méthode que vous utilisez pour mettre à jour l'interface utilisateur en réponse aux gestionnaires d'événements et aux réponses du serveur.
Si vous optez pour des rails, je vous recommande d'utiliser Jquery, et ainsi de profiter d'Ajax et de sa flexibilité,
Il n'y a pas de «moyen unique» pour y parvenir en réaction. Il existe de nombreux modèles de réaction, mais avec une idée commune: transmettre des accessoires (données, méthodes) dans une seule direction, du parent aux enfants.
Dans le cas le plus simple , vous pouvez avoir un (composant enfant) dans le composant ( parent). Tout changement dans (cases à cocher) peut être enregistré dans l'état du composant et utilisé pour la récupération des données. Les données extraites (également enregistrées dans l'état) peuvent être transmises comme accessoires aux enfants. La fonction render simplifiée du composant peut ressembler à:
render() {
return (
<div id="page_layout">
<div id="filters">
<input onChange={/* event handler */} />
<input {/* next filter */} />
</div>
<Results data={this.state.results} />
</div>
)
}
Utilisation de setState code > dans les gestionnaires d'événements forcera le rendu (mise à jour de la vue) des deux composants et . L'état local est utilisé pour filtrer dans presque toutes les applications d'exemple de réaction à faire - mais généralement avec des boutons.
Un gestionnaire d'événements peut être utilisé pour toutes les cases à cocher, la récupération peut être [alors] «déclenchée» à partir du rappel de setState . L'utilisation de redux peut être utilisée comme état commun (une source de vérité) pour les deux (ou plusieurs) composants parallèles (pas de parent / enfant) ... vous devez apprendre de nombreux modèles / techniques de réaction ... question trop large. P >
ce message pourrait vous aider
Votre question est de savoir comment aborder les js sur le front-end? Ou comment exécuter la recherche sur le backend? Non plus? Tous les deux? Autre chose?
avez-vous essayé d'utiliser des frameworks ou des bibliothèques tels que AngularJs, Angular.IO, Jquery? .. il est possible de faire une solution avec eux. Parce qu'ils ont des fonctions, pour faire des demandes en arrière-plan sans recharger le site Web.