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

I'm wondering what the best practice is for passing variables to JavaScript functions in a rails view. Right now I'm doing something like:

我想知道在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 %>

Is this the right way to go about it?

这是正确的做法吗?

5 个解决方案

#1

A few options:

几个选项:

escape_javascript

escape_javascript

Alias: j.

别名:j。

Works only on strings.

只能在字符串。

Escapes characters that can have special meanings in Javascript strings, like backslash escapes, into a format suitable to put inside Javascript string literal quotes.

在Javascript字符串中可以有特殊含义的转义字符，如反斜杠转义，转换成适合放在Javascript字符串文字引号中的格式。

Maintains html_safe status of input, so needs html_safe otherwise special HTML chars like < would get escaped into <.

维护输入的html_safe状态，因此需要html_safe否则像 <这样的特殊html字符将被转义到<。< p>

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

to_json + html_safe

to_json + html_safe

As mentioned by Vyacheslav, go upvote him.

如维亚切斯拉夫所言，支持他。

Works because JSON is almost a subset of Javascript object literal notation.

因为JSON几乎是Javascript对象的一个子集。

Works not only on hash objects, but also on strings, arrays and integers which are converted to JSON fragments of the corresponding data type.

不仅适用于散列对象，还适用于将其转换为相应数据类型的JSON片段的字符串、数组和整数。

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

data- attributes

数据——属性

Add values to attributes, retrieve them with Javascript DOM operations.

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

Better with the content_tag helper:

使用content_tag助手更好:

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

Sometimes called "unobtrusive Javascript".

有时被称为“低调的Javascript”。

gon

百分度

Library specialized for the job: https://github.com/gazay/gon

专门用于此工作的库:https://github.com/gazay/gon

Probably the most robust solution.

可能是最稳健的解决方案。

Gemfile:

gem 'gon'

Controller:

控制器:

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

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

布局app / views /布局/ application.html.erb:

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

View:

观点:

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

See also

另请参阅

Injecting variable values into javascript and HAML in RoR
将变量值注入javascript和RoR

#2

- 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

#3

There's a technique called "unobtrusive javascript". Here's a Railscast about it: link text . It works both with prototype an jQuery. There are also plugins that can help simplify some of the tasks described in the article.

有一种技术叫做“不引人注目的javascript”。这里有一个Railscast:链接文本。它同时使用jQuery原型。还有一些插件可以帮助简化本文中描述的一些任务。

#4

I found that gem client variable, it helps you to do it easily.

我发现了gem客户机变量，它可以帮助您轻松地实现它。

#5

In HAML can data are presented so:

在HAML can数据如下:

.position{data: {latitude: @claim.latitude.to_json, longitude: @claim.longitude.to_json}}

:javascript
   var latitude = $('.position').data('latitude');
   var longitude = $('.position').data('longitude');

#1