javascript - 以rails形式调用coffeescript

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

Coffeescripts看起来像这样

../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>

-------------------------------------------------- -------------------------------------------------- --------------------------------
编辑，尝试完成具有Richard Peck建议的具有数据远程属性的动态选择框

在控制台中，当在make select框中选择make时，似乎在参数上正确了“ make_id”，但是我找不到将其传递给controllers @ 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'

这就是我选择make后进入控制台的内容

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!"

data-remote attribute for select boxes是您要看的很酷的东西：

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

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

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

关于javascript - 以rails形式调用coffeescript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35444758/