Как добавить редактор ace во ввод Haml

Question

Пожалуйста, помогите, я новичок в haml и ace, но я хотел бы включить Ace в некоторые существующие текстовые поля. Я видел похожую проблему здесь , но она находится в html. Я не знаю, как перевести решение в код haml.

Это существующий код haml для текстового поля

        #phoenix_tab.tab-pane.active{ data: { target_id: 'phoenix_tab', role: "tabpanel" }}
            = f.input :phoenix_query_string, label: 'Query String', as: :text, placeholder: 'Enter Phoenix Query String'
            .col-md-offset-2.text-muted{ style: 'margin-top: -1em; text-indent: 10px; font-size: 80%' }
              * Execution type should be set to 'Phoenix or Phoenix (enhanced)' for this to take effect

Я пробовал добавить это js в код

    var editor = ace.edit("bigdata_query_phoenix_query_string");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/sql")

и вот как это оформлено

#bigdata_query_phoenix_query_string {
  position: absolute;
  top: 0; 
  right: 0;
  bottom: 0;
  left: 0;
}

Я также добавил ace. js и mode- sql . js в мои файлы js, но результат такой, как показано на изображении ниже введите описание изображения здесь

Ожидаемый результат : Ace Editor применен к текстовой области

Фактический результат : Нет текстовой области

Я не Я прекрасно понимаю, что делаю не так. Пожалуйста, помогите