如何根据单击块中的哪个项目来渲染不同版本的分部

How can I render different versions of a partial based on which item in a block I click on?

本文关键字：版本 单击 何根 项目      更新时间：2024-05-28

我有一个带有许多记录的模型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%>

_部分html.erb

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

问题是，每次循环都会重置值@painting，到最后它等于最后一次绘制。因此，无论我单击哪幅绘画，最后一幅都将始终是在局部中渲染的那幅。

有人能想出一种方法，让部分渲染的绘画与我点击的绘画相对应，而不为每一个单独编写jQuery吗？

您可以将每个图像的大版本的URL添加为图像上的自定义属性，然后用用户单击的任何图像对应的URL更新查看器引用的URL吗？

类似于：

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

或者，您可以创建一个新的控制器操作（或对现有控制器操作的新响应），该操作通过将图像渲染为部分来进行响应。每当有人点击图像时，您可以使用$.ajax调用控制器操作，并将图像ID作为参数与请求一起发送。服务器将使用param正确地呈现分部，然后在响应中将其发回。然后简单地将html插入到查看器中。如果这是你想走的路线，我可以添加一些示例代码。

这也意味着用户在第一次加载页面时不需要下载每个图像的大版本。这可能是一件好事，也可能不是一件好事。

相关文章：