javascript - 将 Rails 变量传递给 javascript 灯箱弹出窗口

Question

我需要将与某个单击图像相关的 Rails 变量传递到其灯箱容器中。

我将所有上传的媒体输出到我的 _content.html.erb 布局中，如下所示

<% @media_uploads.each do |media_upload| %>
<%= media_upload.title %>
<%= media_upload.user.username unless media_upload.user.nil? %>
<%= media_upload.description %>

当像这样单击任何图像时，我会从 application.js 初始化放大的弹出窗口

$('.box p a').magnificPopup({
  type:'image',
  image: {
    markup: '<div class="mfp-figure">'+'<div class="mfp-close"></div>'+
    '<div class="mfp-box-top">//username, title?</div>'+
    '<div class="mfp-img">//this is where the picture is rendered</div>'+
    '<div class="mfp-box-bottom">//description?</div>'+
    '</div>'+'</div>', 
  }
});

有什么想法如何将变量从 Rails 传递到放大标记吗？我希望在相应的弹出窗口内显示适当的用户、标题和描述(除其他外) - 在 mfp-box-top 和 mfp-box-bottom div 内。

感谢您提供任何提示或技巧!

Answer 1

您必须在客户端解决此问题。最简单的方法是将此信息另外呈现为链接或其他 html 元素上的“data-”属性，如下所示:

 <a href='nice.img' data-title='nice', data-user-name='chuck', data-descrption='lorem impsum' />

然后在神奇的初始化程序中以通用方式查询此信息。

    $('.box p a').magnificPopup({
    type:'image',
    image: {
      markup: ...
      '<div class="mfp-box-top">' + $(this).attr('data-title') + '</div>'
      ...
      }
    });