將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>'
      ...
      }
    });