web-dev-qa-db-ja.com

Slimテンプレート内のCoffeeScriptエンジンでインスタンス変数にアクセスする方法

インスタンス変数を設定しているRailsコントローラがあります-

@user_name = "Some Username"

.slimテンプレートでは、コーヒーエンジンを使用してjavascriptを生成し、client-sie javascriptコードからユーザー名を出力したい-

coffee:
  $(document).ready ->
    name = "#{@user_name}"
    alert name

しかし、これは生成されているjavascriptですか??

$(document).ready(function() {
    var name;
    name = "" + this.my_name;
    alert(name);
}

CoffeeScriptコードでコントローラーインスタンス変数にアクセスするにはどうすればよいですか?

CoffeeScriptの使用時にhamlにも同じ問題があると推測しているため、これをhamlとしてタグ付けしています。

50
kapso

何が起きているかというと、"#{@user_name}"は、CoffeeScriptソースに評価され注入されたRubyコードではなく、CoffeeScriptとして解釈されているということです。 「Ruby変数をCoffeeScriptソースに挿入するにはどうすればよいですか?」

簡単な答えは次のとおりです。これをしないでください。 Railsチームは、3.1のテンプレートに埋め込まれたCoffeeScriptをサポートしないことを意図的に決定しました。これは、リクエストごとにCoffeeScriptをコンパイルしなければならないため、パフォーマンスのオーバーヘッドが非常に大きいためですソースに)。

私のアドバイスは、Ruby変数を純粋なJavaScriptとして個別に提供し、CoffeeScriptからそれらの変数を参照することです。

javascript:
  user_name = "#{@user_name}";
coffee:
  $(document).ready ->
    name = user_name
    alert name
92
Trevor Burnham

私はすべてのコストでインラインjavascriptを避ける傾向があります。

Javascriptから使用する変数をHTMLに保存する良い方法は、HTML5データ属性を使用することです。これは、javascriptを控えめに保つのに理想的です。

32
nathanvda

以下も使用できます。

$(document).ready ->
  name = <%= JSON.generate @user_name %>
  alert name

これは、 [〜#〜] json [〜#〜] がJavaScriptのサブセットであるためです。

2
gene tsai