J'avais implémenté la fonction Like dans Rails, mais lorsque j'ai utilisé cette fonction, les problèmes suivants se sont produits.
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.
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.
delete``` → exécution du fichier
app / views / likes / destroy.js.erb``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 }) %>');
Le résultat est le suivant. J'ai pu confirmer que cela fonctionnait sans transitions de page.
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.
Recommended Posts