以轨道形式调用咖啡脚本

Calling coffeescript in rails form

本文关键字：咖啡 脚本 调用 轨道      更新时间：2023-09-26

我有这个用于动态选择框的咖啡脚本，以仅显示模型选择框中与所选制造商相关的那些模型。我将有多个字段分别使用此函数，因此匿名函数将不起作用。

咖啡脚本看起来像这样

../assets/javascripts/diys.coffee 

DynamicSelect = (makesSelect, modelsSelect) ->
  $(document).on 'change', makesSelect, (evt) ->
    $.ajax 'update_make_models',
      type: 'GET'
      dataType: 'script'
      data: {
        make_id: $("'makesSelect' option:selected").val()
      }
      error: (jqXHR, textStatus, errorThrown) ->
        console.log("AJAX Error: #{textStatus}")
      success: (data, textStatus, jqXHR) ->
        console.log("Dynamic make select OK!")

../views/diys/update_make_models.coffee

$(modelsSelect).empty()
    .append("<%= escape_javascript(render "make_models/make_model") %>")

这是我表单的一部分，它将重复多次，只有 id 会更改，我将将其作为参数传递给"DynamicSelect"函数。那么我需要在哪里以及在哪里放置什么才能正确启动此功能？

<div class="vehicle_field">
    <%= f.fields_for :attached_vehicles do |av| %>
    <p>Select make</p>
    <%= av.select :make, options_for_select(@makes.collect { |m| [m.make_name, m.id] }), { include_blank: "Select make" }, { id: 'makes_select1' } %><br>
    <p>Select model</p>
    <%= av.select :model, (render "make_models/make_model"), {prompt: "Select model"}, { id: 'models_select1' } %><br>
    <p>Select years</p>
    <%= av.select :start_year, (Time.now.year + 1).downto(Time.now.year - 100).to_a, prompt: "Year (from)" %>
    <%= av.select :end_year, (Time.now.year + 1).downto(Time.now.year - 100).to_a, prompt: "Year (to)" %><br>
    <% end %>
</div>

------------------------------------------------------------------------------------------------------------------------------------编辑，尝试完成具有数据远程属性的动态选择框，如理查德·派克建议的那样

在控制台中，在选择"制作

选择"框时，我似乎在参数中正确"make_id"，但我找不到将其传递给变量@models控制器的方法，我做的对吗？

用于从视图中选择附属车辆的表单部件

<div class="vehicle_field">
    <%= f.fields_for :attached_vehicles do |av| %>
    <p>Select make</p>
    <%= av.select :make, (@makes.collect { |m| [m.make_name, m.id] }), { include_blank: "Select make" }, { data: { remote: true, url: "update_make_models", name: "make", update: "#diy_attached_vehicles_attributes_0_model"} } %><br>
    <p>Select model</p>
    <%= av.collection_select :model, @models, (render "make_models/make_model"), {prompt: "Select model"} %><br>
    <p>Select years</p>
    <%= av.select :start_year, (Time.now.year + 1).downto(Time.now.year - 100).to_a, prompt: "Year (from)" %>
    <%= av.select :end_year, (Time.now.year + 1).downto(Time.now.year - 100).to_a, prompt: "Year (to)" %><br>
    <% end %>
</div>

_make_model.html.erb 部分

<% @models.collect do |models| %>
    <option value="<%= models.id %>"><%= models.make_model_name %></option>
<% end %>

diys_controller中的新行动

def new
  @diy = Diy.new
  @step = @diy.steps.new
  @attached_vehicle = @diy.attached_vehicles.new
  @step.add_images_to_steps.new
  @makes = Make.all
  @models = MakeModel.where("make_id = ?", params[:make])
end

还删除了咖啡脚本和编辑的路线

get '/diys/update_make_models', to: 'diys#new', as: 'update_make_models'

这就是我在选择制作后在控制台中得到的内容

Started GET "/diys/update_make_models?diy%5Battached_vehicles_attributes%5D%5B0%5D%5Bmake%5D=12" for ::1 at 2016-02-17 20:03:21 +0200
Processing by DiysController#new as JS
  Parameters: {"diy"=>{"attached_vehicles_attributes"=>{"0"=>{"make"=>"12"}}}}
  Make Load (1.0ms)  SELECT "makes".* FROM "makes"
  MakeModel Load (1.0ms)  SELECT "make_models".* FROM "make_models" WHERE (make_id = NULL)
  Rendered make_models/_make_model.html.erb (3.0ms)
  Rendered diys/_form.html.erb (151.0ms)
  Rendered diys/new.html.erb within layouts/application (260.0ms)
Completed 200 OK in 451ms (Views: 446.4ms | ActiveRecord: 2.0ms | Solr: 0.0ms)

您可以将.on绑定到元素本身：

#app/assets/javascripts/application.coffee   
$(document).on "change", "select#makes_select1", (evt) ->
  $.ajax 'update_make_models',
    type: 'GET'
    dataType: 'script'
    data:
      make_id: $(this).find("option:selected").val()
    error: (jqXHR, textStatus, errorThrown) ->
        console.log "AJAX Error: #{textStatus}"
    success: (data, textStatus, jqXHR) ->
        console.log "Dynamic make select OK!"

您需要查看的很酷的东西是select框的data-remote属性：

= f.collection_select :attribute, @collection, :id, :name, {}, { data: {remote: true, url: "update_make_models"} }

这会将变量params[:object][:attribute]传递给data-url，您可以在控制器中管理该控制器以拉回所需的数据。

使用上面的代码将使您不再需要在 JS 中ajax定义。

相关文章：