javascript - ERB、Ruby on Rails で部分的に JavaScript を使用して HAML をレンダリングする

Question

私はプロジェクトに取り組み始め、私の前の人はHAMLを使用して2つの選択ボックスを表示し、最初の選択に基づいて2番目を更新しました。HAML を ERB に変換する方法がわからないので、HAML をパーシャルに入れただけです。最初の選択ボックスには正しい値が表示されますが、2 番目の選択ボックスには何も含まれていません。最初のボックスで 2 番目のボックスを正しい値で更新するにはどうすればよいですか? 最初のものには州が含まれ、2 番目には選択された州に基づくインストールが含まれることになっています。これが私のコードです：

検索ビュー:

<%= render 'state_installation_select' %>

HAML 部分:

= state_installation_select @states, @installation_options_by_state # ProgramsHelper

プログラムヘルパー:

def state_installation_select(states, installation_options_by_state)
    haml_tag(:div, class: 'field') do
      haml_concat(label_tag :state, "Please select your state")
      haml_concat(select_tag :state, options_for_select(states), include_blank: true, class: 'state state_installation_select')
    end

    haml_tag(:div, class: 'field') do
      haml_concat(label_tag :installation_id, "Please select your installation")
      haml_concat(select_tag :installation_id, nil, include_blank: true, class: 'installation state_installation_select')
    end
    content_for :domready, %(InstallationSelect.init(#{installation_options_by_state.to_json});).html_safe
  end

プログラム コントローラ:

def search_form_for_parents
    @installations = Installation.all
    @states = Installation.states
    @installations_by_state = @installations.group_by(&:state_code)
    @installation_options_by_state = @installations_by_state.each_with_object({}){ |(state,installations), h| h[state] = installations.map{|i| [i.name, i.id]} }
end

プログラム Javascript:

var InstallationSelect = {
  init: function(installations_for_state){

    $state_select = $('select.state.state_installation_select');

    $state_select.change(function(){
      var state = $(this).val();
      var installations = installations_for_state[state] || [];
      var $installation_select = $(this).parent().parent().find('select.installation.state_installation_select');

      $installation_select.html( InstallationSelect.options_for_select(installations) );
    }).triggerHandler('change');
  },

  options_for_select:function(container){
    var options = jQuery.map(container, function(c){
      return '<option value="' + c[1] + '">' + c[0] + '</option>';
    });

    return options;
  }

};