如何将 javascript 变量传递到 js 视图中的 erb 代码中？

Question

我的 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​​ 部分，我怎样才能完成这个？

Answer 1

以下是有关如何执行此操作的一些不同选项：

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

Answer 2

这里最好的其他答案是正确的，这不能通过将 javascript 变量传递到 erb 部分来完成，因为它是在服务器上呈现的，而不是在客户端上呈现的。

但由于任何寻找此问题的人可能都对解决方案感兴趣，而我在这里没有看到该解决方案，因此我将发布这个与 Rails UJS 和 Turbolinks 配合良好的示例。

首先，您将控制器设置为以 HTML 形式返回部分：

format.html { render partial: "new_expense" }

接下来，在 app/views/expenses/new_daily.js.erb 中编写一个 javascript AJAX 函数：

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);
  }
});

这将使您的 Rails 部分返回为一个 html 片段，可用于替换渲染页面的该部分。您可以使用 jQuery 获取 data-num 属性值，对其进行一些数学运算，替换视图中的部分内容，然后再次设置属性值。

您可能会问为什么要费尽心思获取 Rails 部分并将其替换到页面上，而不是仅仅获取数据属性，对其进行数学计算并进行设置？答案是，这是最好的，也许是唯一的方法，当使用 UJS 渲染 Rails 部分并处理对操作的异步响应时，这是非常重要的。

如果您在 create.js.erb 模板中处理来自服务器的异步响应，那么您的变量（例如@daily）将不会反映请求完成后完成的工作（例如，如果在 Sidekiq 等后台服务器上进行了处理）。在这种情况下，您没有最新的操作响应变量可以传递到 js.erb 文件中的 Rails 部分，但您也无法传递 javascript data< /code> 响应您的部分内容，如本问题所指出的。

据我所知，这种方法是在收到异步响应（未显示）的响应后获得完全最新的部分的唯一方法。这将为您提供最新的部分，允许您将 JavaScript 放入其中，并且足够灵活，可以在几乎任何用例中工作。

Answer 3

让我们确保我们互相理解。您的 erb 模板 (new_daily.js.erb) 将在服务器端处理，将评估 ruby​​ 代码（在 <% %> 内），进行替换，然后生成的 javascript 将被发送到浏览器。然后，在客户端，浏览器将评估此 JavaScript 代码，并为变量 i 分配一个值。
现在你想什么时候传递这个变量以及传递给哪个部分？

Answer 4

据我所知，没有办法直接做到这一点，原因也很简单，html是在服务器端执行的，而javascript是一种客户端语言，这意味着它在本地浏览器中执行，这就是为什么如果你尝试要在两者之间传递变量，您必须向服务器发出请求，
然而，这个问题是通过调用 AJAX 请求来解决的，这个 AJAX 请求的作用与向服务器发送新请求相同，但是它在不刷新或重新加载页面的情况下做到了这一点，给用户带来了没有发出请求的错觉。

有人问了类似的问题在这里

您可以了解有关 AJAX 的更多信息MDN 上：

Answer 5

是的，您可以使用 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>

Answer 6

简单的答案是你不能。部分在服务器端扩展，JavaScript 变量稍后在客户端设置。您可以将 i （作为变量名）作为部分的参数并在那里使用它。

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

并且在部分

alert(<%= variable %>);

Answer 7

看看 gon 宝石。 https://github.com/gazay/gon

它为您提供了一个简单的对象，您可以将变量传递给该对象将通过 window.gon 可用于您的脚本

也可在此处引用
http://railscasts.com/episodes/324-passing-data-to-javascript

Answer 8

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 -将数据传递给javascript？view=asciicast