2011-01-16 26 views
45

私はZenDeskを使うために以下の機能を持っています。 current_userの詳細を以下のようにフォームに挿入したいと思います。 (これは私のhtml.hamlテンプレートです)。しかし、私はこの仕事をする方法を理解することはできません。RoRのjavascriptと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 
     }); 
    } 

要するに、hamlのjavascript要素にrails変数を挿入する方法があります。

+0

答えはHAMLなしで同じになります:http://stackoverflow.com/questions/2464966/passing-ruby-variables-to-javascript-function-in-rails-view –

答えて

54

これは動作するはずです。 #{}の内側のすべてのインラインルビー置く:単純な文字列のための

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

逆方向はどうですか?つまり、 :javascript #生のsome_helper(JSのここからの引数)} – januszm

+0

Javascriptはブラウザで実行され、サーバー上ではRubyが実行されるので、そのようにすることはできません。 – Heikki

20

直接#{}作品を、一般的には最もスケーラブルな/安全なソリューションではありません。

例えば、Rubyでリテラルのバックスラッシュはあなたにそれが改行文字として解釈されますJavaScriptで問題を引き起こす:

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

this awesome Rails castから、以下の技術を使用することができる。

をエスケープ_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フラグメントに変換された の文字列、配列、および整数を含む任意のハッシュオブジェクトに作用します。

JavascriptのDOM操作でそれらを取得し、属性に値を追加する属性データ -

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

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' 
+2

Downvotersは私が情報を改善できるように説明してください。私は報復することはありません。ありがとう。 –

関連する問題