web-dev-qa-db-ja.com

RoRのjavascriptおよびHAMLに変数値を注入する

ZenDeskを使用するための次の機能があります。次のように、current_userの詳細をフォームに挿入したいと思います。 （これは私のfrom 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要素にどのように挿入しますか。

javascriptruby-on-railshaml
52
Dave G

これは機能するはずです。すべてのインラインRubyを#{}の内側に配置：

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

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は ほぼJavaScriptオブジェクトリテラル表記のサブセット であるため機能します。

対応するデータ型のJSONフラグメントに変換される文字列、配列、整数など、任意のハッシュオブジェクトで動作します。

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

data- attributes

属性に値を追加し、Javascript DOM操作でそれらを取得します。

content_tagヘルパーの方が良い：

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

gon

ジョブに特化したライブラリ： 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'
28
Ciro Santilli 新疆改造中心996ICU六四事件