在javascripts中調用函數_path幫手

Question

我有這個「添加車輛」按鈕，呈現並添加部分視圖，我會多次，所以匿名函數將無法正常工作，所以有什麼辦法可以定義函數和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'); 
} 

並從那裏呈現定義的部分。

爲什麼我在它自己的文件中的視圖文件夾中有此功能的原因是我需要它有自己的控制器操作。

Answer 1

不要以爲這是這樣做的最佳方式，但我沒有想出更好的主意所以......

創建新功能

../app /assets/javascripts/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' 
... 

導致

../app/views/diys/attach_vehic le.js.ERB

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

而且曾在

../diys_controller.rb attach_vehicle行動

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> 

Answer 2

我不完全確定你在這裏試圖達到什麼目的。如果我沒有弄錯，你試圖在單擊一個按鈕後從部分向頁面添加元素。

如果使用Turbolinks那麼你可以嘗試其部分替代Turbolinks-Classic Github

然而，當我曾在我的項目之一，需要說的功能 - 它只是沒有不管我做什麼工作。所以我決定使用render js:來實現我自己的。在此基礎上這裏就是我會做什麼：

附加到全局訪問變量的js函數，讓說：

應用程序/資產/樣式表/ Java腳本/ 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" %> 

我在這裏顯示的想法，你可能想幹它，並以你的方式實現它。我和我的同事正在努力提供這種功能。

我希望這是有幫助的。讓我知道你是否有問題。