web-dev-qa-db-ja.com

JavaScriptビューをjsビューのerbコードに渡す方法は？

Rails 3プロジェクトにこのJavascriptビューがあります。

app/views/expenses/new_daily.js.erb

var i = parseInt($('#daily').attr('data-num')) + 1;
//$('#daily').append('agrego fila ' + i + ' <br />');

$('#daily').append('<%= escape_javascript(render(partial: 'new_expense', locals: { i: i })) %>');

$('#daily').attr('data-num', i);

私は 'i' javascript変数をローカルにRubyパーシャルに渡したいのですが、どうすればこれを達成できますか？

javascriptruby-on-railsviewerb
28
fespinozacast

私が知る限り、それを直接行う方法はなく、理由もかなり簡単です.htmlはサーバー側で実行され、javascriptはクライアント側の言語であり、ローカルブラウザで実行されることを意味するため、 2つの間で変数を渡すには、サーバーにリクエストを行う必要がありますが、この問題はAJAXリクエスト、this AJAXリクエストはサーバーに新しいリクエストを送信するのと同じことを行いますが、ページを更新またはリロードせずにリクエストを行ったという錯覚をユーザーに与えます。

男が同様の質問をする ここ

そして、あなたはAJAX ここMDN） ：の詳細を学ぶことができます

22
Umer Hassam

はい、jqueryを使用して値を渡すことができます。

<%=f.text_field :email ,:id=>"email_field" %>

<script type="text/javascript">
   var my_email= "[email protected]"
   $(document).ready(function(){
        $("#email_field").val(my_email);
   });
</script>
14
Thaha kp

簡単な答えはできない。パーシャルはサーバー側で展開され、JavaScript変数は後でクライアント側で設定されます。 i（変数名として）をパーシャルのパラメーターにして、そこで使用できます。

render :partial => 'xx', :locals => { :variable => 'i' }

そして部分的に

alert(<%= variable %>);
3
Marek Sapota

Gon gemをご覧ください。 https://github.com/gazay/gon

window.gonを介してスクリプトで使用できる変数を渡すことができるシンプルなオブジェクトを提供します

こちらも参照 http://railscasts.com/episodes/324-passing-data-to-javascript

3
Sam Figueroa

1）erbテンプレートでグローバル変数を使用してjsタグを作成できます。その後、任意のjsファイルからその変数にアクセスできます

_<%= javascript_tag do %>
   window.productsURL = '<%= j products_url %>';
<% end %>
_

2）erbテンプレートのdata-attributeにデータを渡し、クライアント側のjsからその方法でアクセスします$('#products').data('products')

_<%= content_tag "div", id: "products", data: {products: Product.limit(10)} do %>
   Loading products...
<% end %>
_

3） gon を使用して、jsでRails変数を使用できます

良い記事があり、それを読んで、あなたの特定のケースのための素晴らしい解決策があります http://railscasts.com/episodes/324-passing-data-to-javascript 、もっとコメントがあります http://railscasts.com/episodes/324-passing-data-to-javascript?view=asciicast

2
Julia Usanova

その方法に関するいくつかの異なるオプションがあります。

http://jing.io/t/pass-javascript-variables-to-Rails-controller.html

2
Greg

ここでのその他の最良の答えは、クライアントではなくサーバー上でレンダリングされるため、javab変数をerbパーシャルに渡すことではできないということです。

しかし、これを探している人はおそらくここにはない回避策に興味があるので、Rails UJSとTurbolinksでうまく動作するこの例を投稿します。

最初に、パーシャルをHTMLとして返すようにコントローラーをセットアップします。

format.html { render partial: "new_expense" }

次に、javascript AJAXの関数をapp/views/expenses/new_daily.js.erbに記述します：

var i = parseInt($('#daily').attr('data-num')) + 1;

$.ajax({
  url: '/daily',
  type: 'GET',
  dataType: 'html',
  contentType: "application/html",
  success: function(response) { 

      $('#daily').replaceWith(response)

      $('#daily').attr('data-num', i);
  }
});

これは、レンダリングされたページのその部分を置き換えるために使用できるhtmlフラグメントとしてRails partialを取得します。jQueryを使用してdata-num属性値を取得できます。いくつかの計算を行い、ビュー内のパーシャルを置き換えてから、属性値を再度設定します。

データ属性を取得し、その上で数学を実行し、それを設定するのではなく、Rails partialを取得し、ページ上で置換するというすべての問題に取り組む理由を尋ねるかもしれません。これが最善であり、おそらくアクションへの非同期応答を処理しながらUJSを使用してRailsパーシャルをレンダリングするときに本当に不可欠なことを行う唯一の方法です。

サーバーからの非同期応答をcreate.js.erbテンプレートで処理している場合、変数（たとえば、@ daily）は、リクエストの完了後に行われた作業を反映しません（たとえば、 Sidekiqなどのバックグラウンドサーバーでの処理）。その場合、Rails js.erbファイルのpartialに渡す最新のアクション応答変数はありませんが、javascript dataを渡すこともできません。この質問で指摘されているように、パーシャルへの応答。

私の知る限り、このアプローチは非同期応答（図示せず）への応答を受信した後に完全に最新のパーシャルを取得する唯一の方法です。これにより、最新のパーシャルが取得され、javascriptをその中に取り込むことができ、ほとんどすべてのユースケースで動作するのに十分な柔軟性があります。

2
user3670743