Передача данных из цикла, в частичное нажатие, в Rails - PullRequest
0 голосов
/ 02 мая 2019

У меня есть список элементов в category/1, которые отображаются в цикле, и у меня есть модал, который я отображаю в нижней части страницы с <%= render "category/update_item_modal" data: {???} %>

Я пытаюсь передать данные в модальный режим, который появится при нажатии кнопки ниже: -

<a href="#" data-toggle="modal" data-target="#updateItemModal"><button class="btn btn-primary btn-sm">Edit Title</button></a>

Сам модал: -

<div class="modal fade" id="updateItemModal" tabindex="-1" role="dialog" aria-labelledby="updateItemModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="updateItemModalLabel">Change Item</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- UPDATE TITLE HERE? -->
        <%= item.title??? %>
      </div>
    </div>
  </div>
</div>

Итак, когда кнопка «Редактировать заголовок» нажата на определенном элементе, я должен передать свой правильный элемент на ярлык data и визуализировать материал из этого заголовка в модальном режиме. Каков наилучший способ сделать это, если мой модал находится за пределами цикла? Мне нужен JS здесь?

P.S. В моем контроллере у меня есть доступ к @category, который содержит около 100 элементов, т.е. я не могу получить конкретный элемент из контроллера, так как на странице их много.

1 Ответ

1 голос
/ 03 мая 2019

самый простой способ, который вы можете использовать здесь, это ajax-запрос, чтобы открыть модал и визуализировать форму в режиме редактирования с помощью файла js.erb, но это также займет один цикл запрос-ответ.

Render Link

<%= link_to 'Update Record', edit_item_path(item.id) %>
<div id='renderModal'></div>

, затем создайте edit.js.erb , визуализируйте ваш модальный фрагмент в div 'renderModal'

$('#renderModal').empty().append("<%= j render partial: 'item_edit_modal'%>")
$('#updateItemModal').modal()

, это легко и быстрос точки зрения разработчика, но есть второй подход

, если вы хотите сделать это быстрее с точки зрения пользовательского опыта, то вам следует использовать api для решения этой проблемы.когда вы делаете это с помощью API, вам нужно сохранить ссылку на свою запись в кнопке / ссылке, в «data-id» или в любой другой форме, чтобы вы могли определить, какую запись необходимо обновить.

...