javascript - Rails 应用程序的 Bootstrap Modal 问题

Question

对于新手问题，我深表歉意。我试图在我的 Rails 应用程序上实现 Bootstrap Modal 功能。具体来说，当用户单击特定图像时，模式就会被激活，显示该特定图像。我查看了以下SO问题(Twitter Bootstrap Modal Form Submit)和(Twitter Bootstrap Modal Form Submit)，但按照说明进行操作后，我遇到了这个问题>特定的项目图片没有传输到我使用javascript的模态。我已经在下面提供了所有相关代码，非常感谢你们。

index.html.erb

<%= image_tag item.avatar.url(:medium), class: "open-AddImgDialog", id:"test",  data: { target: "#myModal", toggle: "modal"} %>
<div class="modal fade" tabindex="-1" id="imagemodal" role="dialog">
   <div class="modal-dialog" role="document" >
     <!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <%= item.product %>
  </div>
  <br/>
  <h4 class="modal-title">
    <%= item.product %>
  </h4>
  <div class="modal-body">
    <div id="picture" style="border: 1px solid black; width: 200px; height: 200px;">

      <canvas id="myCanvas" width="200" height="200"></canvas>

    </div>        
    <br/>
    <br/>
    </div>
     <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>                
  </div>
</div>

application.js

$(document).on('click',".open-AddImgDialog", function() {               
    html2canvas($("#picture"), {
        onrendered: function (canvas) {

            //theCanvas = canvas;
            //document.body.appendChild(canvas);
            //Canvas2Image.saveAsPNG(canvas); 

            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var img = document.getElementById("test");

            var x = 0;
            var y = 0;
            var width = 200;
            var height = 200;

            ctx.drawImage(img, x, y, width, height);

        }
    });

});

Answer 1

必须聘请专业开发人员来弄清楚到底发生了什么。这是有效的正确答案以及对其原因的解释 - 希望它可以帮助陷入类似困境的人。

导致这个问题的原因是我们有 <% @items.each do |item| %> 后跟 <%= image_tag item.avatar.url(:medium), class: "open-AddImgDialog", id:"test", data: { target: "#myModal", toggle: "modal"} %>然后是上面列出的模态代码。这会导致当模式被激活时，相同的图像(第一个项目图像)会一遍又一遍地出现。在处理 @items.each 时，此问题的解决方案是利用更灵活的 id，当我们从一个项目帖子移至另一个项目帖子时，该 id 可以动态更改。

<%= image_tag item.avatar.url(:medium), class: "block", id: "image-#{dom_id(item)}",  data: { target: "#myModal-#{dom_id(item)}", toggle: "modal"} %>


<div class="modal fade" tabindex="-1" id="myModal-<%= dom_id(item) %>" aria-labelledby="myModalLabel" role="dialog">
.....
#Everything else follows normal bootstrap conventions