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

时间:2011-01-16 22:01:04

标签: javascript ruby-on-rails haml

我有以下使用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元素。

2 个答案:

答案 0 :(得分:64)

这应该工作,即。将所有内联红宝石放在#{}

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

答案 1 :(得分:26)

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

例如,Ruby中的文字反斜杠会导致Javascript中的问题,它将被解释为换行符:

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

this awesome Rails cast开始,可以使用以下技术:

<强> escape_javascript

别名:j

仅适用于字符串。

转义在Javascript字符串中具有特殊含义的字符, 像反斜杠转义,转换为适合放入Javascript字符串文字引号的格式。

维持html_safe输入状态, 所以需要html_safe否则<之类的特殊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

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

的Gemfile:

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'