2014-10-01 65 views
0

在我的應用我有下面的代碼模式:變化範圍(Rails的3.2,jQuery的)

.modal-body 
    .row 
     .col-sm-4 
     .btn-group-vertical#gear-buttons-list 
      - Gear.all.each do |gear| 
      .btn.btn-large.btn-default.gear-button{"data-id" => gear.id} #{gear.name} ($#{gear.charge}) 

我提出有名稱按鈕列表收取一塊齒輪供用戶選擇。然而,在頁面的其他地方有一個下拉欄,讓用戶選擇一個類別。在我的應用程序,一個類別的has_many齒輪,和我想的模式,以僅顯示與已經選擇的類別相關聯的齒輪,如以下作用域在Gear.rb定義:

scope :moving, -> { where(category_id: 1) } 

是有一種直接的方式來編碼模式中的.each循環,以便根據所選的類別動態限制其範圍。

這是我在jobs.js嘗試(將其更改爲jobs.js.erb後):

if($('#job_category_id').length > 0) { 
    $('#job_category_id').change(function() { 
     var categoryID = $(this).val(); 
     var categoryName = _categories[categoryID].name; 
     $("#gear-buttons-list").html(""); // clear default buttons 
     $("#gear-buttons-list")   // append new buttons 
     .append("<% Gear." + categoryName + ".each do |gear| %><div class='btn btn-large btn-default gear-button' "data-id" => gear.id><%= #{gear.name} %></div><% end %>"); 
    }); 

這是不行的,顯然是因爲我試圖做字符串連接在嵌入的Ruby的方式(獲得syntax error, unexpected tSTRING_BEG錯誤)。也許有人可能用這個指向我的正確方向?

回答

0

您需要更新頁面(從服務器再次獲取),或者每次更改類別時至少需要帶齒輪的片段。現在你試圖在瀏覽器中執行Ruby代碼,這顯然不起作用。

+0

什麼是「明顯」是每個開發者不同,因爲我們每個人都有不同數量的知識和經驗。無論如何,事實證明,我可以使用Ajax來避免每次更改類別時更新頁面(除了我們之外,對於許多人來說,這可能是「顯而易見」的;))。 – sixty4bit 2014-10-02 04:03:12

0

解決此使用Ajax:

1)I使jobs.js以下Ajax請求(的categoryID從早期呼叫衍生val()

$.ajax("/gears", {dataType: "script", data:{category_id: categoryID}}) 

2)在gears_controller.rb

def index 
    @gears = Gear.where(category_id: params[:category_id]) 
end 

3)控制器呈現齒輪索引,這是.js.erb,它反過來呈現一個集合部分瓦特第i個每個齒輪一個按鈕:

/views/gears/index.js.erb 

$("#gear-button-list").html("<%=j render partial: '/gears/gear_buttons', collection: @gears, as: :gear %>") 

4)部分:

.btn.btn-large.btn-default.gear-button{"data-id" => gear.id} 
    %p 
    %h5 
     #{gear.name} ($#{gear.charge}) <br /> 
     %small #{gear.description}