Question

我有这个＆＃34;添加车辆＆＃34;按钮渲染和添加局部视图，我会多次使用，所以匿名函数不起作用，所以有什么办法可以在link_to helper中定义函数和参数吗？

部分来自我调用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');
}

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

我在views文件夹中的自己的文件中有这个功能的原因是我需要它有自己的控制器动作。

Answer 1

我不确定你想要在这里实现什么。如果我没有弄错的话，你试图在单击按钮后从部分向页面添加元素。

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

然而，当我在我的一个项目上工作并需要所述功能时 - 无论我做什么，它都无法正常工作。所以我决定使用render js:实现自己的。基于此，我将做的是：

将js函数附加到全局可访问变量，例如：

应用/资产/样式表/ Javascript角/ 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来提供这种功能。

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

Answer 2

不要认为这是做到这一点的最佳方法，但我没有想出更好的主意......

在

中创建新功能

<强> ../应用程序/资产/ Javascript角/ diys.coffee

# Add fields for additional vehiclesS
addVehicleFields = (addVehicleButton, newAttachVehicleDiv, attachVehiclePartial, addVehicleDivButton) ->
    $(document).on 'click', addVehicleButton, (evt) ->
        $.ajax 'attach_vehicle',
            type: 'GET'
            dataType: 'script'
            data: {
                addVehicleButtonDiv: addVehicleDivButton,
                newVehicleDiv: newAttachVehicleDiv,
                newVehiclePartial: attachVehiclePartial
            }
            error: (jqXHR, textStatus, errorThrown) ->
                console.log("AJAX Error: #{textStatus}")
            success: (data, textStatus, jqXHR) ->
                console.log("Addin new vehicle fields OK!")

addVehicleFields '#add_vehicle_button2', '#attached_vehicle2', 'diys/attach_vehicles/attach_vehicle2_form', '#add_vehicle_div_button2'
addVehicleFields '#add_vehicle_button3', '#attached_vehicle3', 'diys/attach_vehicles/attach_vehicle3_form', '#add_vehicle_div_button3'
...

导致

<强> ../应用/视图/小五金/ attach_vehicle.js.erb

$("<%= @newAttachVehicleDiv %>").html("<%= escape_javascript (render  @attachVehiclePartial) %>");
$("<%= @newAttachVehicleDiv %>").slideDown(350);
$("<%= @addVehicleDivButton %>").css('display', 'none');

必须在

中定义这些变量

../ diys_controller.rb attach_vehicle action

def attach_vehicle
    ...
    @addVehicleDivButton = params[:addVehicleButtonDiv]
    @newAttachVehicleDiv = params[:newVehicleDiv]
    @attachVehiclePartial = params[:newVehiclePartial]
    respond_to do |format|
      format.js
    end
end

并将按钮路径更改为“＃”

<div id="add_vehicle_div_button2">
    <%= link_to 'Add vehicle', '#', remote: true, id: "add_vehicle_button2" %>
</div>

在javascripts中调用函数_path helper

2 个答案: