javascript - 使用 JavaScript 插入 ERB

Question

我正在尝试使用 JS 将 ERB 元素插入到我的页面中，但是 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') %>作为我页面上的字符串

正确的做法是什么？

Answer 1

在 .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>

您可以在 javascript 表达式中使用字符串 'foo' 将其动态插入到您希望的位置，我在这里使用了 jQuery。

如果你需要使用<select>...</select>包含的 js 文件中的 html 字符串，您可以在 .html.erb 中声明它文件，然后在包含的文件中使用它。