introduction

J'avais implémenté la fonction Like dans Rails, mais lorsque j'ai utilisé cette fonction, les problèmes suivants se sont produits.

Puisque la page entière est re-rendue, cela implique un traitement inutile.
Comme les transitions de page sont impliquées, même si vous faites un `` J'aime '' ou un commentaire en bas de la page, il passera en haut de la page, ce qui réduira la convivialité.

Par conséquent, j'ai décidé d'ajouter la fonction Ajax pour améliorer la convivialité sans transition de page.

Au début, je pensais que la meilleure façon de l'implémenter était d'utiliser JavaScript / jQuery pour lancer le processus Ajax, mais quand je l'ai recherché, Rails avait link_to '', etc. Il a été dit que le traitement Ajax peut être utilisé en ajoutant `` remote: true``` à la méthode de. Contrairement à la méthode de mise en œuvre que je pensais au début, c'était simple, donc je l'ai immédiatement implémentée avec cette méthode.

supposition

La fonction de publication et la fonction similaire ont déjà été implémentées.
La fonction similaire implémentée est du type qui implique une transition de page lorsque le bouton similaire est enfoncé.
Pour ce qui précède, on suppose que le traitement Ajax est mis en œuvre par une communication asynchrone. Cet article est une introduction aux étapes suivies dans cette implémentation.

Environnement / version

Ruby 2.6.3
Rails 6.0.2.1
jQuery 3.5.1

la mise en oeuvre

Tout d'abord, laissez app / views / posts / show.html.erb '' créer le bouton app / views / likes / _like.html.erb '' à render``` ..

`erb:app/views/posts/show.html.erb`


#···réduction

<div class="post-like mr-auto">
  <%= render partial: 'likes/like', locals: { post: @post, like: @like } %>
</div>

#···réduction

Ajoutez la fonction Ajax en ajoutant remote: true aux arguments de la fonction similaire `` `delete et post```.

`erb:app/views/likes/_like.html.erb`


<% if current_user.already_liked?(post) %>
  <%= link_to 'Like', post_like_path(post, like), method: :delete, class:'post-like__cancel', remote: true %>
<% else %>
  <%= link_to 'Like', post_likes_path(post), method: :post, class:'post-like__enable', remote: true %>
<% end %>

En l'ajoutant, vous pourrez exécuter le traitement suivant après avoir cliqué sur chaque lien.

Méthode delete``` → exécution du fichier app / views / likes / destroy.js.erb``
Méthode post``` → exécutez le fichier de `` app / views / likes / create.js.erb```

Ensuite, le fichier js.erb est une méthode de `` Controller telle que @ post ou `` @ like comme indiqué dans le code ci-dessous Vous pouvez utiliser les variables d'instance définies. c'est pratique.

`erb:app/views/likes/destroy.js.erb`


$('.post-like').html('<%= j(render partial: 'likes/like', locals: { post: @post, like: @like }) %>');

`erb:app/views/likes/create.js.erb`


$('.post-like').html('<%= j(render partial: 'likes/like', locals: { post: @post, like: @like }) %>');

Ce qui a été fait

Le résultat est le suivant. J'ai pu confirmer que cela fonctionnait sans transitions de page.

enfin

De plus, j'ai pu implémenter une fonction de suivi et des commentaires. À l'avenir, je créerai également une fonction de recherche, donc j'utiliserai également Ajax.

Article de référence

Implémentez facilement Ajax (communication asynchrone) avec remote: true et js.erb dans Rails! (Avec démo de fonction similaire)

J'ai essayé d'implémenter le traitement Ajax de la fonction similaire dans Rails