クリックしたブロック内のどのアイテムに基づいて、異なるバージョンのパーシャルをレンダリングすることができますか？

Question

多くのレコードを持つPaintingというモデルがあります。私はそれらをすべて印刷しています。それぞれについて、いくつかのjQueryを添付して、各ペイントをクリックすると、大きなバージョンのペイントが部分的にレンダリングされます。

<div id="viewer"></div> 
<% Painting.all.each_with_index do |painting, index| %> 
    <%= image_tag(painting.path, id:"painting"+index%> 
    <% @painting = painting %> 
    <script type="text/javascript"> 
     $("#painting<%=index%>").click(function() { 
      $("#viewer").html("<%= escape_javascript(render 'partial') %>"); 
     }); 
    </script> 
<%end%> 

_partial.html.erbは

<%= image_tag(@painting.path, class:"large-painting") %> 
<!-- more code --> 

問題は、値@paintingは各ループでリセットされ、そして端によってそれが最後の絵画と同じです。したがって、どの絵をクリックしても、最後のものは常に部分的にレンダリングされたものになります。

誰かが、部分的に描画されたペイントを、クリックしたものに対応させる方法を考えてもらえますか、それぞれ個別のjQueryを書く必要はありませんか？

Answer 1

イメージのカスタム属性として大きなイメージのURLを追加し、ビューアが参照するURLを、ユーザーがクリックしたイメージに対応するURLに更新できますか？以下のような

何か：

$("#painting<%=index%>").click(function(){ 
    $(Viewer_Image_Element).prop('src', $(this).prop('custom_URL_property')) 
    }); 

また、あなたは（既存のコントローラのアクションにしたり、新しい応答）新しいコントローラのアクションを作成することができ、部分画像をレンダリングすることによって応答します。誰かが画像をクリックするたびにコントローラーアクションを呼び出すために$.ajaxを使用して、要求と一緒に画像IDをパラメーターとして送信することができます。サーバーはparamを使用してパーシャルを適切にレンダリングし、レスポンスに戻します。その後、htmlをビューアに挿入するだけです。これが目的のルートであれば、サンプルコードを追加できます。

これは、ユーザーが最初にページを読み込むときに、各イメージの大きなバージョンをダウンロードする必要がないことを意味します。これは良いことかもしれません。