javascript - 在 javascripts _path 帮助器中调用函数

Question

我有这个“添加车辆”按钮，它会渲染并将部分内容添加到 View 中，并且我会多次使用它，因此匿名函数将不起作用，那么有什么方法可以在 link_to helper 中定义函数和参数吗？

来 self 调用js的表单，我需要在其中定义函数名称和参数

...
<div id="add_vehicle_div_button2">
   <%= link_to 'Add vehicle', attach_vehicle_path, remote: true, id: "add_vehicle_button2" %>
</div>
<div id="attached_vehicle2" style="display:none;"></div>
...

../views/diys/attach_vehicle.js.erb 通向

function addAttachVehicleFields(newAttachVehicleDiv, addVehicleDivButton, attachVehiclePartial) {
    $(newAttachVehicleDiv).html("<%= escape_javascript (render #{attachVehiclePartial}) %>");
    $(newAttachVehicleDiv).slideDown(350);
    $(addVehicleDivButton).css('display', 'none');
}

从那里它呈现定义的部分。

我在 View 文件夹中自己的文件中拥有此函数的原因是我需要它有自己的 Controller 操作。

Answer 1

我不太清楚你想在这里实现什么目标。如果我没记错的话，您正在尝试在单击按钮后将部分元素添加到页面。

如果您使用 Turbolinks，那么您可以尝试其部分替换 Turbolinks-Classic Github

但是，当我从事一个项目并需要上述功能时 - 无论我做什么它都不起作用。所以我决定使用 render js: 来实现我自己的。基于此，我会这样做:

将你的 js 函数附加到全局可访问的变量，比方说:

app/assets/stylesheets/javascripts/vehicles.coffee

@Vehicles =
  addAttachVehicleFields: (newAttachVehicleDiv, addVehicleDivButton, attachVehiclePartialHtml) ->
    $(newAttachVehicleDiv).append(attachVehiclePartialHtml);
    $(newAttachVehicleDiv).slideDown(350);
    $(addVehicleDivButton).css('display', 'none');

然后在处理此请求的具体操作中(attach_vehicle_path):

vehicle_partial_html = render_to_string(partial: params[:vehicle_partial]).squish

render(js: "Vehicles.addAttachVehicleFields('#{params[:vehicle_div]}', '#{params[:vehicle_div_button]}', '#{vehicle_partial_html}')")

然后您可以使用以下内容修改您的 link_to 帮助程序:

<%= link_to 'Add vehicle', attach_vehicle_path(vehicle_div: [your_div_selector_here], vehicle_div_button: [your_div_button_selector_here]), remote: true, id: "add_vehicle_button2" %>

我在这里展示了这个想法，您可能想要干燥它并以您的方式实现它。我和我的同事正在研究 gem 以提供此功能。

我希望这对您有帮助。如果您有疑问，请告诉我。