Как связать рельсы с coffeescript для обновления содержимого страницы в реальном времени

Question

Я пытался реализовать функциональность AJAX в своем веб-приложении, и у меня возникли некоторые трудности. В моем приложении пользователям может понравиться контент, называемый "пачки". До сих пор я был в состоянии получить симпатичную функцию для асинхронного обновления базы данных, но я немного застрял в том, как заставить счетчик (отображаемый рядом с кнопкой «Мне нравится») обновляться. Я новичок в JS / Coffeescript, так что некоторая помощь будет очень признательна!

До сих пор мой подход заключался в использовании обработчика ruby ​​(.erb) для моего кода coffeescript (.coffeescript.erb). Код в файле выглядит так:

$(document).on "click", "#upvote-count", ->
    $("#upvote-counter").html(<%= wad.get_upvotes.size %>)

Тем не менее, я получаю сообщение об ошибке, оставаясь "wad" не определено. Я перебираю коллекцию пачек на странице, на которой они отображаются. Код для этого выглядит так:

<% @wads.each do |wad| %>
   <div class="list-group-item wad-list-group-item">
    <div class="row">
      <%= link_to wad_comments_path(wad), class: 'col-3 justify-content-center align-items-center' do %>
      <%= image_tag wad.image.url(:thumb), class: 'img-fluid' %>
 <% end %>

<%= link_to wad_comments_path(wad), class: 'wad-link' do %>
  <div class="col-md-6 col-9">
    <h5><%= wad.problem_state %></h5>
    <p><%= wad.short_form %></p>
    <p class="text-right wad-comment">
      <%= link_to fa_icon("comment"), wad_comments_path(wad), options = {class: "profile-link"} %>
    </p>
  </div>
<% end %>

<%= render 'wads/actions', wad: wad %>

И "wad / actions" рендерит:

  <div>
   <%= link_to fa_icon("chevron-circle-up", class: "profile-link", id: "upvote-count"), like_wad_path(wad), remote: true, method: :put %>
 <span class="nowrap" id="upvote-counter"> <%= wad.get_upvotes.size %> 
 </span>
</div>

Answer 1

Вы могли бы сделать много вещей. Прежде всего я бы предложил использовать ajax с рельсовым путем. Это означает наличие ссылки upvote следующим образом:

#index.html
<h1>Wads Index</h1>
<ul>
  <% @wads.each do |wad| %>
    <li>
      <%= wad.name %>
      <div id="wad_<%=wad.id%>">
       Upvotes: <%= wad.upvotes %>
      </div>
      <%= link_to upvote_wads_path(wad), remote: true, method: 'post' do %>
        Upvote
      <% end %>
    </li>
  <% end %>
</ul>

Обратите внимание, что у нас есть div, который имеет идентификатор вида wad_3. В link_to используется синтаксис remote: true, вместо вызова по этому пути сделать вызов ajax. Это вызовет WadsController#upvote и увеличит количество голосов.

class WadsController < ApplicationController
  def index
    @wads = Wad.all
  end
  def upvote
    @wad = Wad.find(params[:id])
    @wad.upvotes = @wad.upvotes + 1
    @wad.save
  end

конец

После выполнения WadsController#upvote действие вызовет представление, но представление теперь будет не html, а файлом javascript (js) с некоторым встроенным рубином (erb) с именем upvote.js.erb , И должно быть что-то вроде этого:

$('document').ready(function() {
    var div = $('#wad_<%= @wad.id %>');
    div.empty().html("Upvotes: <%= @wad.upvotes %>");
});

Этот файл принимает обновленный @wad, находит свой счетчик дивизий upvotes и обновляет его содержимое новым счетчиком upvotes.

Конечно, чтобы все работало, вы должны определить маршруты для контроллера.

Rails.application.routes.draw do
  root 'wads#index'
  resources :wads do
    collection do
      post 'upvote/:id', to: 'wads#upvote', as: 'upvote'
    end
  end
end

Если вы хотите больше узнать о работе с Javascript и Ajax в Rails, прочитайте официальную документацию здесь