用 JavaScript 插入 ERB

Question

我正在尝试使用 JS 将 ERB 元素插入到我的页面中，但是 insertAdjacentHTML 方法不起作用，只是将我的 erb 元素作为字符串放置

我尝试使用 raw、.html_safe 和 append()，但是 none 这些都有效。

这基本上就是我想做的事情

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

阿卜杜勒的评论是正确的。让我详细解释一下 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 函数被执行了。它不会对 rails 部分做任何事情，它只会更新 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
});

Answer 2

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

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

用 JavaScript 插入 ERB

Inserting ERB with JavaScript

javascript

ruby-on-rails

erb