以rails的形式調用coffeescript

Question

我有這個動態選擇框的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> 

------------------------------------------ -------------------------------------------------- ---------------------------------------- 編輯，試圖完成動態選擇具有數據遠程屬性的理查德·派克建議

在控制檯中，似乎我在選擇make時使參數選擇框中的右側「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。該局部分

<% @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 

新動作還刪除了兩個coffeescripts和編輯路線

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) 

Answer 1

您只需綁定.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。