如何在 JavaScript 中调用 Rails 方法

Question

我是 ruby on Rails 的新手，我想从 javascript 调用控制器方法显示.html.erb<label class="switch">  <%if @vehicle.parking%>    <input type="checkbox" checked onchange="parkingMode(<%= @vehicle.id %>)">  <%else%>    <input type="checkbox" onchange="parkingMode(<%= @vehicle.id %>)">  <%end%>  <span></span></label>车辆控制器.rbdef change_parking  vehicle = Vehicle.find(params[:vehicle_id])  if !vehiculo.parking    vehicle.parking = true    vehicle.save  else    vehicle.parking = false    vehicle.save  endend车辆.jsfunction parkingMode(id){    console.log(id)}

Answer 1

您无法直接从视图内调用 Rails 控制器方法，您需要向其发送请求。

一个好的方法是使用表格：

<%= form_for(@vehicle) do |f| %>

  <input name="parked" type="checkbox" checked="<%=@vehicle.parked%>" />

  <input type="submit" />

<%= end %>

然后您的控制器可以根据是否检查来更新车辆params[:parked]并重定向回同一页面

def change_parked

  @vehicle.update_column(:parked, params[:parked])

  redirect_to vehicle_path(@vehicle.id)

end

这样做的好处是您不需要任何 JavaScript 即可对车辆进行更改。但是，如果您想避免页面刷新......

要在没有表单的情况下执行此操作，您需要使用 JavaScript 和 Ajax 来 ping 路由到该控制器方法的端点。

所以，你的parkingModeJavaScript 方法可能是这样的（为了方便起见，我在这里使用 jQuery）

const request = $.post('/vehicles/change_parking')

request.done((response) => {

  console.log('Do something here')

})

这将调用您的控制器方法，该方法可能返回JSON以下结果：

def change_parking

  vehicle = Vehicle.find(params[:vehicle_id])

  if !vehiculo.parking

    vehicle.parking = true

    vehicle.save

  else

    vehicle.parking = false

    vehicle.save

  end

  render json: { vehicle: vehicle }, status: 200

end

然后您需要更改checked复选框的值：

const request = $.post('/vehicles/change_parking')

request.done((response) => {

  $('input[type="checkbox"]).attr('checked', response.responseJSON.vehicle.parked)

})

我想谈几件事。

首先，当您可以将其简化为类似以下内容时，您if在视图中使用了一个语句：

<input type="checkbox" checked="<%= @vehicle.parked %> onchange="parkingMode(<%= @vehicle.id %>)">

这意味着仅checked当车辆停放时才会出现该复选框。

其次，在你的change_parking方法中，你只需要调用save一次

def change_parking

  vehicle = Vehicle.find(params[:vehicle_id])

  if !vehiculo.parking

    vehicle.parking = true

  else

    vehicle.parking = false

  end

  vehicle.save

end

您也可以执行类似操作vehicle.parking = !vehicle.parking并删除该if语句。

Answer 2

您可以使用 JS 调用控制器操作。但不是直接的。但是，您可以使用 Rails 已经提供的工具来执行此操作。

首先，我们渲染一个远程复选框：

check_box_field 'parking_mode_toggle', '1', false, remote: true, data: { url: '/change_parking' }

尽管官方文档中没有给出，但如果您阅读Rails UJS代码，您会发现只要勾选/取消勾选复选框，UJS驱动程序就会发出请求。

然后，在您的控制器中，您可以执行以下操作：

def change_parking

  # TODO: Change your database state according to the +params+ received

  respond_to do |format|

    format.js { render js: 'parkingMode()' }

  end

end