Question

我在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个项目，即由于页面上有很多项目，我无法从控制器中获取特定项目。

Answer 1

最简单的方法是使用ajax请求打开模式，并借助js.erb文件在编辑模式下呈现表单，但这也将花费一个请求-响应周期。

渲染链接

<%= 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进行操作时，您需要以button / link，“ data-id”或任何其他形式保留对记录的引用，以便标识需要更新的记录。

在Rails中将数据从循环传递到部分单击

1 个答案: