Rails 6：根据第一个列表中的选择呈现新列表

Question

我正在创建一个将显示两个列表的应用程序，其中第二个是根据第一个列表中的选择呈现的。全部在同一页面上，无需重新加载。

第一个列表是根据模型 VehicleCategory 中的所有名称创建的。

Vehicles belong_to VehicleCategory 和 VehicleCategory has_many Vehicles。

第二个列表应该是一个单独的相同列表，其列表项应该在自己的div中。

第一个列表是这样渲染的：

---in main view:

<div class="list-group">
<%= render @allvehiclecategories %>
</div>

---in controller:

def main
  @allvehiclecategories = Vehiclecategory.all 
end

---and in _vehiclecategory.html.erb:

<%= content_tag :a, class: ["list-group-item", "list-group-item-action"] do -%>
       <%= klass.name %>
<% end -%>

并使用此 jquery 将引导类“活动”添加到所选列表项：

    $('.list-group a').click(function(e) {
    e.preventDefault()

    $that = $(this);

    $that.parent().find('a').removeClass('active');
    $that.addClass('active');
    });

创建第二个列表的最佳方法是什么？

Answer 1

好的，通往罗马的道路有很多。当您确定没有太多车辆时，您可以将所有车辆添加到您的 html 中的某个位置，并首先使它们不可见，然后在点击事件中使其可见。但我可以想象在这种情况下有很多车辆你不应该这样做，因为加载页面需要很长时间。

另一种选择是通过 http 请求 (AJAX) 从 Rails 应用程序获取您想要显示的车辆，并将它们添加到第二个列表中。您可以返回 html 或 json。使用 html 时，您可以在使用 json 时将其添加到页面中，您需要在 javascript 中构建 html。由于您使用的是 jQuery，因此您可以使用 jQuery.get 方法从您的 Rails 应用程序中获取它们。

这是一个很好的blog post，关于使用从 Rails 返回 html 的 AJAX 方法。