带有 Rails 应用程序的引导模式问题答案

【问题标题】：Issue with Bootstrap Modal with Rails App带有 Rails 应用程序的引导模式问题
【发布时间】：2016-12-19 01:45:39
【问题描述】：

对于新手的问题，我深表歉意。我试图在我的 rails App 上实现 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);

        }
    });

});

【问题讨论】：

标签： javascript jquery ruby-on-rails twitter-bootstrap

【解决方案1】：

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

问题是我们有后跟<%= image_tag item.avatar.url(:medium), class: "open-AddImgDialog", id:"test", data: { target: "#myModal", toggle: "modal"} %>，然后是上面列出的模式代码。这会导致在激活模式时一遍又一遍地出现相同的图像（第一个项目图像帖子）。在处理 @items.each 时，解决此问题的方法是使用更灵活的 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

【讨论】：