从ruby访问Javascript变量 [英] Accessing Javascript variable from ruby

问题描述

将数据从Ruby传递到Javascript很简单，例如：

Passing data from Ruby to Javascript is easy, for example:

<script type="text/javascript">

    function change_value(val){

      alert ("<%= @alert %>")   
      }
    }
</script>

这将发送一个警报，其中包含存储在控制器中警报变量的数据。

This will sent an alert with the data stored at the alert variable in the controller.

但我不知道它是如何工作的，例如，如果我需要存储元素 id 进入控制器变量：

But I don't know how it works in the opposite direction, for example, if I need to store an element id into a controllers variable:

<script type="text/javascript">

    function change_value(element){
      <% @element_id = *** element.id *** %>

      alert ("<%= @element_id %>")   
      }
    }
</script>

接下来是真正的交易，由***投降的代码应该是所需的javascript值（@billeable_qts是哈希值）：

The real deal is up next, the code surrended by *** are supposed to be the needed javascript values (@billeable_qts is a Hash):

<script type="text/javascript">

  function change_value(product){

    <% @billeable_qts[****product.id****] = ***document.getElementById('product.id').value****  %>
    <% @billeable_qts.each do |key, value| %>
       <% alert = "Key = " + key + ", value: " + value.to_s%>
       alert ("product: <%= alert %>")
    <% end %>


  }

</script>

推荐答案

我假设您指的是嵌入式Ruby文件，类似于js.erb扩展名。

I'm assuming that you are referring to an embedded Ruby file with something like a js.erb extension.

使用那些实例变量，例如 @element_id 生成一个javascript文件然后运行客户端（即在浏览器中）

Those instance variables, such as @element_id, are used to generate a javascript file to then run client side (ie in the browser)

重要的是要指出变量 @element_id 仅用于生成javascript文件，然后您可以在创建javascript文件后基本上认为它已消失。

It's important to point out here, that the variable @element_id is only used to generate the javascript file then you can essentially consider it "gone" after that javascript file is created.

这就是为什么你可以将Ruby变量值传递到javascript文件中。但是，当客户端运行回到那些Ruby变量时，你无法传递javascript获取的值，因为它们基本上不再存在，因为它们的唯一目的是创建javascript文件。

That is why you can "pass" Ruby variable values into the javascript file. However, you cannot pass values obtained by the javascript when run client side back to those Ruby variables because they essentially no longer exist as their only purpose was to create the javascript file.

因此，用于生成该文件的控制器操作实际上已经达到了它的目的，并且它和它的变量等不再可用。

So the controller action used to generate that file has essentially served it's purpose, and it and it's variables, etc are no longer available.

现在看来，你有一个javascript变量，获得客户端，你想在js alert中发布之前进行操作。

Now, it appears that you have a javascript variable, obtained client side, that you want to manipulate before posting it in the js alert.

你有两个选择

1）你可以使用纯javascript操作它。

1) You can just manipulate it using pure javascript.

<script type="text/javascript">

    function change_value(element){
      idToAlert = element.id;
      idToAlert++;
      alert (idToAlert);   
      }
    }
</script>

2）如果由于某种原因需要根据Rails等数据库值修改值应用程序可以访问，您可以将其发布到控制器和操作然后将其返回到javascript。
（注意：我在这里使用jQuery库来提高效率）

2) If for some reason that value needs to be modified based on something like database values that the Rails app has access to, you can post it to a controller and action then return it back to the javascript. (Note: I'm using jQuery library here for efficiency)

<script type="text/javascript">

function change_value(element){
$.ajax({
  url: "/controller/update_element_id",
  type: "POST",
  data: {"old_element_id": <%= @element_id %>, "new_element_id": element.id},
  success: function(response) {
    alert (response);
  },
  error: function(response) {
    console.log('error: ' + response);
  }
});
}
</script>

Controller＃update_element_id可能是JS POST请求的端点，如下所示。

Controller#update_element_id might be an endpoint for a JS POST request that looks like this.

def update_element_id
  item = Model.where(element_id: params["old_element_id"]).first
  item.update_attributes(element_id: params["new_element_id"])
  render json: {element_id: item.element_id}
end

我希望这会有所帮助。很高兴提供任何额外的澄清。

I hope this helps. Glad to provide any additional clarification.

这篇关于从ruby访问Javascript变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！