在 RoR 中将变量值注入 javascript 和 HAML答案

【问题标题】：Injecting variable values into javascript and HAML in RoR在 RoR 中将变量值注入 javascript 和 HAML
【发布时间】：2011-06-10 03:38:10
【问题描述】：

我有以下使用 ZenDesk 的功能。我想将我的 current_user 详细信息注入到表单中，如下所示。（这是我的 html.haml 模板）。但是我不知道如何使这项工作。

:javascript
    if (typeof(Zenbox) !== "undefined") {
      Zenbox.init({
        dropboxID:   "xxxxx",
        url:         "xxxxx.zendesk.com",
        tabID:       "support",
        tabColor:    "black",
        tabPosition: "Left",
        requester_name:  =current_user ? "#{current_user.first_name} #{current_user.last_name}" : "" ,
        requester_email: =current_user ? "#{current_user.email}" : "" ,
        hide_tab: true
        });
    }

简而言之，如何将 rails 变量注入到 haml 中的 :javascript 元素中。

【问题讨论】：

如果没有 HAML，答案将是相同的：stackoverflow.com/questions/2464966/…

标签： javascript ruby-on-rails haml

【解决方案1】：

这应该有效，即。将所有内联 ruby 放入 #{}:

requester_name:  "#{current_user.first_name + ' ' + current_user.last_name if current_user}",
requester_email: "#{current_user.email if current_user}",

【讨论】：

那么反方向呢？即 :javascript #{raw some_helper(ARGUMENTS FROM JS HERE)}
Javascript 在浏览器中运行，而 ruby 在服务器上运行，所以你不能那样做。

【解决方案2】：

Direct #{} 适用于简单的字符串，但通常不是最可扩展/最安全的解决方案。

例如，Ruby 中的文字反斜杠会导致您在 Javascript 中出现问题，它将被解释为换行符：

- a = "\\n"
:javascript
  '#{ a }' !== "\\n"

来自this awesome Rails cast，可以使用以下技术：

escape_javascript

别名：j。

仅适用于字符串。

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

保持html_safe输入状态，所以需要html_safe 否则像&lt; 这样的特殊HTML 字符会被转义到&lt;。

- a = "\\n<"
:javascript
  '#{ j(a)           }' === '\\n&lt;'
  '#{ j(a).html_safe }' === '\\n<'

to_json + html_safe

有效，因为 JSON 是 almost a subset of Javascript object literal notation。

适用于任何散列对象，包括字符串、数组和整数转成对应数据类型的 JSON 片段。

- data = { key1: 'val1', key2: 'val2' }
:javascript
  data = #{ data.to_json }
  data.key1 === 'val1'
  data.key2 === 'val2'

数据属性

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

更好地使用content_tag 助手：

= content_tag 'div', '', id: 'data', data: {key1: 'val1', key2: 'val2'}
:javascript
  $('#data').data('key1') === 'val1'
  $('#data').data('key2') === 'val2'

贡

专门用于该工作的图书馆：https://github.com/gazay/gon

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

宝石文件：

gem 'gon'

控制器：

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

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

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

查看：

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

【讨论】：

投反对票的人请解释一下，以便我改进信息。我从不报复。谢谢。