如何在 Rails 视图中将 Ruby 变量传递给 JavaScript 函数?

2024-06-23

我想知道在 Rails 视图中将变量传递给 JavaScript 函数的最佳实践是什么。现在我正在做类似的事情:

<% content_for :javascript do %> 
  <script type="text/javascript">
    Event.observe(window, 'load', function(){          
        js_function(<%= @ruby_array.to_json %>, <%= @ruby_var %>); )}
  </script>
<% end %>

这是正确的做法吗?


几个选项:

escape_javascript

Alias: j.

仅适用于字符串。

转义在 Javascript 字符串中可能具有特殊含义的字符, 就像反斜杠转义一样,转换成适合放入 Javascript 字符串文字引号内的格式。

维持html_safe输入状态, 所以需要html_safe否则特殊的 HTML 字符,如<会逃逸到&lt;.

<% a = "\\n<" %>
<%= javascript_tag do %>
  '<%= j(a)           %>' === '\\n&lt;'
  '<%= j(a).html_safe %>' === '\\n<'
<% end %>

to_json + html_safe

正如维亚切斯拉夫所说,去投票给他吧。

有效,因为 JSON 是几乎是 Javascript 对象文字表示法的子集 http://timelessrepo.com/json-isnt-a-javascript-subset.

不仅适用于哈希对象,还适用于字符串、数组和整数 转换为相应数据类型的 JSON 片段。

<% data = { key1: 'val1', key2: 'val2' } %>
<%= javascript_tag do %>
  var data = <%= data.to_json.html_safe %>
  data.key1 === 'val1'
  data.key2 === 'val2'
<% end %>

数据属性

向属性添加值,并使用 Javascript DOM 操作检索它们。

更好地与content_tag helper:

<%= content_tag 'div', '', id: 'data', data: {key1: 'val1', key2: 'val2'} %>
<%= javascript_tag do %>
  $('#data').data('key1') === 'val1'
  $('#data').data('key2') === 'val2'
<% end %>

有时称为“不显眼的 Javascript”。

gon

专门从事该工作的图书馆:https://github.com/gazay/gon https://github.com/gazay/gon

可能是最强大的解决方案。

Gemfile:

gem 'gon'

控制器:

gon.key1 = 'val1'
gon.key2 = 'val2'

Layout app/views/layouts/application.html.erb:

<html>
<head>
  <meta charset="utf-8"/>
  <%= include_gon %>

View:

<%= javascript_tag do %>
  gon.key1 === 'val1'
  gon.key2 === 'val2'
<% end %>

See also

  • 将变量值注入 RoR 中的 javascript 和 HAML https://stackoverflow.com/questions/4708369/injecting-variable-values-into-javascript-and-haml-in-ror
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Rails 视图中将 Ruby 变量传递给 JavaScript 函数? 的相关文章

随机推荐