Изменить масштаб .each петли с раскрывающимся баром (Rails 3.2, JQuery)

Question

В моем приложении у меня есть модальный со следующим кодом:

.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}) 

Я делаю список кнопок, которые имеют имя за сборку части Gear для пользователя. Однако в другом месте на странице есть раскрывающаяся панель, которая позволяет пользователю выбирать категорию. В моем приложении, категория has_many Gears, и я хотел бы модальный, чтобы отобразить только Gears, связанные с категорией, которая была выбрана, например, следующие области действия определены в 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 %>"); 
    }); 

Это не работает, по-видимому, из-за того, как я пытаюсь сделать конкатенацию во встроенном Рубине (получение syntax error, unexpected tSTRING_BEG ошибка). Может ли кто-нибудь, возможно, указать мне в правильном направлении?

Answer 1

Вам необходимо обновить страницу (получить ее снова с сервера) или, по крайней мере, фрагмент с передачами при каждом изменении категории. Прямо сейчас вы пытаетесь выполнить Ruby-код в браузере, что явно не сработает.

Answer 2

решаемые это с помощью Ajax:

1) Я сделать следующий запрос Ajax в jobs.js (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) Контроллер отображает индекс Gear, который равен .js.erb, что, в свою очередь, делает коллекцию частичной w Ith одной кнопки для каждого механизма:

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