Я пытаюсь перезагрузить div с AJAX в моем приложении Ruby. DIV несет «если условие»

Question

1. Это мое в моих pages.home.html.erb

     <div id="favorites-div">
       <% if current_user.voted_for? item %>
         <%= link_to '<i class="fas fa-minus-square plus_and_minus_button"></i>'.html_safe, item_unlike_path(item.id)%> 
       <% else %>    
         <%= link_to '<i class="fas fa-plus-square plus_and_minus_button"></i>'.html_safe, item_like_path(item.id)%>
       <% end %>
     </div>
   

2. Я использую драгоценный камень act_as_votable

3. Я вложил эти две вещи в мои вещи: маршруты: получить «как», чтобы: «элементы # как» получить 'непохожий' на: 'элементы # непохожий'

4. В контроллере предметов я определил 2 метода: как нравится item = Item.find (params ['item_id']) item.liked_by current_user redirect_back fallback_location: root_path конец

   Def в отличие item = Item.find (params ['item_id']) item.unliked_by current_user redirect_back fallback_location: root_path конец

4.1 Эти два метода доступны во всем классе ItemsController, и они не находятся внутри какого-либо из методов CRUD.

Мои вопросы будут такими: 1. Какую функцию JS вы бы порекомендовали? Должен ли я удалить, а затем добавить идентификатор в div? 2. Я просто снова загружаю div? (.Load) 3. Нужно ли мне создавать новый файл в моем приложении Rails для реализации этого метода?

Ваша помощь очень ценится!

Answer 1

Традиционным способом сделать это в Rails было рендеринг нового фрагмента HTML на сервере и отправка его в браузер, завернутый в JavaScript, который знает, как обновить DOM с помощью нового HTML, когда браузер получил и оценил это.

Для этого вам нужно настроить несколько вещей:

• Фрагмент, который вы хотите визуализировать динамически, должен быть перемещен в часть, чтобы вы могли визуализировать его независимо от любого представления
• Вам нужен идентификатор для содержащего элемента, чтобы вы могли легко определить, куда вставить повторно обработанный HTML
• Вам необходимо представление .js, которое может отображать частичное, а также JavaScript, необходимый для обновления DOM.
• Вы должны использовать удаленные ссылки

Ваши HTML-представления должны выглядеть примерно так:

# pages.home.html.erb

<div id="favorites-div">
  <%= render 'votes' %>
</div>

# votes.html.erb

<% if current_user.voted_for? item %>
  <%= link_to '<i class="fas fa-minus-square plus_and_minus_button"></i>'.html_safe, item_unlike_path(item), data: { remote: true }%> 
<% else %>    
  <%= link_to '<i class="fas fa-plus-square plus_and_minus_button"></i>'.html_safe, item_like_path(item), data: { remote: true } %>
<% end %>

Ваше новое представление JavaScript должно визуализировать частичное и заменить существующий HTML новым HTML, используя помощник j для экранирования символов JavaScript в возвращаемой строке:

# unlike.js.erb

$('#favorites-div').html('<%=j render 'votes' %>')