Вставка ERB с помощью JavaScript - PullRequest
Новая
       9

Вставка ERB с помощью JavaScript

1 голос
/ 23 сентября 2019

Я пытаюсь вставить элемент ERB на мою страницу, используя JS, но метод insertAdjacentHTML не работает, и просто помещаю свой элемент erb в виде строки

Я пытался с raw, .html_safe и append(), но ничего из этого не работает.

вот в основном то, что я хочу сделать 

btn_plus.addEventListener('click', () => {
    btn_plus.insertAdjacentHTML('beforebegin', `<%= select_tag :rg1, options_from_collection_for_select(@users, 'id', 'email') %>`);
  })

, и в результате он просто помещает <%= select_tag :rg1, options_from_collection_for_select(@users, 'id', 'email') %> как строку на моей странице

Как правильно это сделать?

Ответы [ 2 ]

1 голос
/ 23 сентября 2019

в файле .html.erb вы можете использовать помощник actionview для генерации такой строки: 

<%= javascript_tag do %>
    const foo = '<%= select_tag(:foo, raw("<option>bar</option><option>baz</option>")) %>'
    $('#put_it_here').append(foo)
<% end %>

вы также можете использовать options_for_select, но у меня не было ничего удобного для проверкиэто, так что мой пример просто использует необработанные options теги.

в браузере выводится: 

<script>
//<![CDATA[

  const foo = '<select name="foo" id="foo"><option>bish</option><option>bash</option></select>'
  $('#put_it_here').append(foo)

//]]>
</script>

, и вы можете использовать строку 'foo' в выражении javascript длявставьте его динамически, где вы хотите, я использовал jQuery здесь.

Если вам нужно использовать html-строку <select>...</select> во включенном js-файле, вы можете объявить ее в файле .html.erb и позже использоватьэто во включенном файле.

1 голос
/ 23 сентября 2019

Комментарий Абдул верен.Позвольте мне подробно объяснить вам, как работает рендеринг Rails и JS.

Когда вы вводите URL в адресную строку, скажем http://url.com/articles/1, Rails получает этот запрос и ищет действие Articles#show, а затем преобразует show.html.erb файл в .html файл (+ заменяет динамический материал в этом файле), а затем отправляет этот HTML-файл в браузер.Все это происходит на стороне сервера.Ваш JS в браузере до сих пор не имеет к этому никакого отношения.

Теперь, когда ваш браузер получает HTML (+ файлы CSS и JS), браузер отобразит HTML-файл и теперь выполнит JSв браузере.Итак, теперь ваша btn_plus.addEventListener функция выполнена.Он ничего не сделает для части рельсов, он просто обновит DOM.Вот почему, когда вы просматриваете инструменты разработки, вы увидите 

<%= select_tag :rg1, options_from_collection_for_select(@users, 'id', 'email') %>

, а не тег <select></select>.

Вы можете сделать что-то подобное.Включите ваш <%= select_tag :rg1, options_from_collection_for_select(@users, 'id', 'email') %>, где вы хотите, в свой файл .html.erb.Тогда в вашем JS вы можете сделать что-то вроде этого: 

const rg1 = document.getElementById('rg1');
const btn_plus = document.getElementById('btn_plus'); // change your ID here if it's different

// Hide the select tag
rg1.style.display = 'none';

// On btn click, show the select tag:
btn_plus.addEventListener('click', () => {
  rg1.style.display = 'inline-block'; // or `block` or anything you want
});
...