如何使用javascript变量获取rails url答案

【问题标题】：How to use javascript variable to get a rails url如何使用javascript变量获取rails url
【发布时间】：2017-08-14 23:39:32
【问题描述】：

我有一个如下所示的图片链接：

<a href="#user-image-modal" data-toggle="modal" data-id="<%= image.id %>"><img class="user-photo" src="<%= image.picture.medium.url %>" alt="" /></a>

还有一个看起来像这样的模态：

  <div id="user-image-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="user-image" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div>
        <div class="modal-body">
          <img src="" alt="">
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>

点击图片链接时，我想打开图片的放大版本。图片的 url 来自于carrierwave helper UserImage.find(id).picture.large.url。

我的 js.erb 文件：

  $('#user-image-modal').on('show.bs.modal', function (event) {
    var link = $(event.relatedTarget)
    var photo = link.data('id')
    var modal = $(this)

    // What comes next?
  })

我需要在模态框的img标签中设置src属性为UserImage.find(photo).picture.large.url。 photo 变量对应UserImage 记录的id。如何使用 photo 变量来获取正确的 url。我认为我不能在 erb 标签中使用 photo 变量。

【问题讨论】：

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

将大图片 url 作为数据属性添加到链接中，就像使用 id 属性一样。然后（点击）获取 url 并做任何你想做的事情。

<a href="#user-image-modal" data-toggle="modal" data-url="<%= image.picture.large.url %>">
  <img class="user-photo" src="<%= image.picture.medium.url %>" alt="" />
</a>

$('#user-image-modal').on('show.bs.modal', function (event) {
  var link = $(event.relatedTarget);
  var imgSrc = link.data('url');
  var modal = $(this);

  modal.find(".modal-body img").attr('src', imgSrc);
})

另一种方法是使用给定的id 发送 AJAX 查询以获取图片。

【讨论】：