在 js.erb 文件中的 ruby 代码中包含一个 javascript 变量答案

【问题标题】：Include a javascript variable into a ruby code in js.erb file在 js.erb 文件中的 ruby 代码中包含一个 javascript 变量
【发布时间】：2020-10-03 09:39:37
【问题描述】：

我有一个选择输入，用户可以在其中选择公司。每个公司都有一个图片网址，我希望当用户单击选择选项时，公司的图片会添加到选择输入旁边。在这里，我想让data.id 返回它的值，以便可以使用正确的图像生成 url。

在我看来我有

<img class="my_img" src="">

<%= select("company", "company_id", Company.all.collect {|p| [ p.name, p.id ] }, { id: "select-company"})%>

在我的 js.erb 文件中

$('#select-company').on('select2:select', function (e) { 
  var data = e.params.data;
  $(".my_img").attr("src", "<%= Company.find(#{data.id}).logo_url(:thumb) %>");
});

【问题讨论】：

这个例子根本行不通。 ERB 插值发生在服务器上，它实际上并不运行 javascript。所以你只会得到一个 NoMethodError。你实际上想用这段代码完成什么？（请不要说“包含一个 javascript 变量”）。
我正在尝试更改选择时更改图像
你能添加一个视图和用户故事的例子吗？听起来您应该使用数据属性将 url 附加到视图中的元素。
我在我的问题中添加了更多详细信息

标签： javascript ruby-on-rails

【解决方案1】：

select("company", "company_id") do
  Company.all.each do |c|
    content_tag(:option, c.name, value: c.id, data: { src: c.logo_url(:thumb) })
  end
end

通过传递一个块来选择，您可以自定义选项元素的生成并将数据属性附加到元素。

然后您可以在事件处理程序中简单地读取数据属性：

$('#select-company').on('select2:select', function (e) { 
  var src = $(e.params.data.element).data('src');
  $(".my_img").attr("src", src);
});

这些都不需要使用js.erb 模板。

【讨论】：

我从未真正使用过 select2 所以 YMMV。我基于 JS 关闭 stackoverflow.com/questions/22261209/…

【解决方案2】：

感谢@max 的回答，这里的解决方案包括一个选定的参数和一个类。

select("company", "company_id", Company.all.collect {|p| [ p.name, p.id, { 'data-url-path'=>p.logo_url(:thumb) }] }, { selected: params["company_id"] }, { class: "select-company" })

$('#company_company_id').on('select2:select', function (e) {
  var data = e.params.data;
  var src = $('#company_company_id select option[value="' + data.id + '"]').data('url-path');
  $(".my_img").attr("src", src);
});

【讨论】：