在rails视图中将rubyvariables传递给javascript函数
我想知道在rails视图中传递variables到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
别名: j
。
仅适用于string。
将可以在Javascriptstring中具有特殊含义的字符(如反斜杠转义符)转义为适合放入JavaScriptstring引号的格式。
保持input的html_safe
状态,所以需要html_safe
否则需要特殊的HTML字符<
将被转换成<
。
<% a = "\\n<" %> <%= javascript_tag do %> '<%= j(a) %>' === '\\n<' '<%= j(a).html_safe %>' === '\\n<' <% end %>
to_json + html_safe
正如维亚切斯拉夫所提到的那样,请他上去。
因为JSON 几乎是Javascript对象文字符号的一个子集 。
不仅适用于散列对象,还适用于转换为相应数据types的JSON片段的string,数组和整数。
<% 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
帮手更好:
<%= content_tag 'div', '', id: 'data', data: {key1: 'val1', key2: 'val2'} %> <%= javascript_tag do %> $('#data').data('key1') === 'val1' $('#data').data('key2') === 'val2' <% end %>
有时称为“不显眼的Javascript”。
坤
专门为此工作的图书馆: https : //github.com/gazay/gon
可能是最强大的解决scheme。
的Gemfile:
gem 'gon'
控制器:
gon.key1 = 'val1' gon.key2 = 'val2'
Layout app/views/layouts/application.html.erb
:
<html> <head> <meta charset="utf-8"/> <%= include_gon %>
视图:
<%= javascript_tag do %> gon.key1 === 'val1' gon.key2 === 'val2' <% end %>
也可以看看
- 将variables值注入到RoR中的javascript和HAML中
- content_for :javascripts_vars do = "var costs_data = #{@records[:cost_mode][:data].to_json}".html_safe = "var graph_data = #{@records[:cost_mode][:graph].to_json}".html_safe
有一种叫做“不显眼的javascript”的技术。 这里有一个关于它的Railscast: 链接文本 。 它与原型和jQuery一起工作。 还有插件可以帮助简化文章中描述的一些任务。
我发现,gem客户端variables ,它可以帮助你轻松地做到这一点。
在HAML中,数据是这样呈现的:
.position{data: {latitude: @claim.latitude.to_json, longitude: @claim.longitude.to_json}} :javascript var latitude = $('.position').data('latitude'); var longitude = $('.position').data('longitude');