如何在我的案例中显示 bootstrap 模态？

Question

我正在使用 bootstrap 并且我有一个 link 从 home#index 重定向到 images#show 操作。 link 是用 haml 写的：

- url = @entry.class.to_s.downcase.singularize
    = link_to(send("#{url}_path", @entry), data: { 'type' => @entry.class.to_s.downcase }) do
        = yield

所以目前，home#index 显示图像列表，当单击图像时，上面写的 link 将用户重定向到特定图像的视图例如：images/1.也就是说 @entry 代表图像，当点击时重定向到特定图像或 (@entry).

我不想离开主页 (home#index)，我只想显示一个模态视图，它会考虑单击了哪些图像（或 @entry）。我如何修改此 link 并添加代码以在单击上面的 link 时显示 bootstrap 模式？我应该遵循哪些其他步骤？我只需要帮助来显示模态。

这是我的踪迹：

Started GET "/images/3" for ::1 at 2016-09-07 22:28:10 -0400
 Processing by ImagesController#show as */*
  Parameters: {"id"=>"3"}
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" =       ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
  Image Load (0.3ms)  SELECT  "images".* FROM "images" WHERE "images"."id" =  LIMIT 1  [["id", 3]]
  Group Load (0.4ms)  SELECT DISTINCT "groups".* FROM "groups" INNER JOIN     "group_memberships" ON "groups"."id" = "group_memberships"."group_id" WHERE     "group_memberships"."member_id" =  AND "group_memberships"."member_type" =      AND "group_memberships"."group_type" =   [["member_id", 1], ["member_type", "User"], ["group_type", "Group"]]
  GroupMembership Load (0.4ms)  SELECT "group_memberships".* FROM "group_memberships" WHERE "group_memberships"."member_id" =  AND "group_memberships"."member_type" =   [["member_id", 3], ["member_type", "Image"]]
  GroupMembership Load (0.5ms)  SELECT "group_memberships".* FROM "group_memberships" WHERE "group_memberships"."group_type" =  AND "group_memberships"."member_type" =  AND "group_memberships"."member_id" =     AND "group_memberships"."group_id" IN (-1, -1)  [["group_type", "Group"],   ["member_type", "User"], ["member_id", 1]]
  Rendered images/_modal.html.erb (0.0ms)
  Rendered images/show.js.erb (1.2ms)
  Completed 200 OK in 27ms (Views: 10.0ms | ActiveRecord: 1.9ms)

Answer 1

一种选择是使用 js 模板并将您的链接更改为使用 remote: true 选项：

<%- @images.each do |image| -%>
<%= link_to '...', image_path(image) remote: true %>
<%- end -%>
<div id="modals"></div>

接下来在控制器中可以将响应类型设置为 js（同时保留 html 选项可能是个好主意）：

respond_to do |format|
  format.js
end

然后在处理 js 的模板中：

// app/views/images/show.js.erb
$("#modals").html('<%= j render "images/modal", image: @image %>');
$('#modals .modal').modal();
$('#modals .modal').modal('.toggle');

最后为模态添加部分内容并设置所需的任何标记：

<!-- app/views/images/_modal.html.erb -->
<div class="modal fade">
  ...
  <%= image_tag(image.url, class: "img-responsive") %>
  ...
</div>

如何在我的案例中显示 bootstrap 模态？

How do I display a bootstrap modal in my case?

ruby-on-rails

haml

bootstrap-modal