向/从 JavaScript 和 Rails 传递参数答案

【问题标题】：Passing parameters to/from JavaScript & Rails向/从 JavaScript 和 Rails 传递参数
【发布时间】：2011-11-25 16:58:35
【问题描述】：

在我的 Rails 应用程序中，我有一个辅助方法 location，它可以获取给定 IP 地址的坐标，并使它们在所有控制器和视图中都可用。例如 location.latitude 返回用户的纬度。你明白了。

我还有一些 Javascript，可以根据给定的 lat/lon 对从 Google Maps API 绘制地图。问题是我不知道如何将 location 参数传递给 JavaScript！

JavaScript 位于“application.js”中，如下所示：

$(document).ready(function() 
  { 

    //Map options...I want the params to go into the var 'MapOptions' below

    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(40.764698,-73.978972),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    //Setup and Draw the Map...
    //....................................
  };

像这样在 HTML 中调用地图本身。没有明显的方法来传递参数。

<div id="map_canvas">
  <!-- The Map gets drawn here! -->
</div>

我知道这可能是一个显而易见的问题，但我以前从未以这种方式将参数从我的应用程序传递给 Javascript。

【问题讨论】：

标签： javascript ruby-on-rails google-maps

【解决方案1】：

我认为data attributes 在这里工作得很好。

html

<div id="map_canvas" data-latitude="40.764698" data-longitude="-73.978972">
  <!-- The Map gets drawn here! -->
</div>

或者和你的助手一起

<div id="map_canvas" data-latitude="<%= location.latitude %>" data-longitude="<%= location.longitude %>">
  <!-- The Map gets drawn here! -->
</div>

$(document).ready(function() { 

  //Map options...I want the params to go into the var 'MapOptions' below

  function initialize() {
    var mapDiv = $('#map_canvas');
    var lat = mapDiv.data('latitude'),
        lng = mapDiv.data('longitude');

    var mapOptions = {
      center: new google.maps.LatLng(lat,lng),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

  //Setup and Draw the Map...
  //....................................
};

【讨论】：

嘿乔！迎接你那天晚上！ JavaScript 可能是我的弱点，因为我只是出于必要才开始做前端。再次感谢伙计！

【解决方案2】：

您可以将 lat 和 long 分配给视图中的隐藏字段。在你的 applicons.js 脚本中，让它们像 $("#lat").val() 一样不是最终的解决方案，但应该可以正常工作。

【讨论】：

【解决方案3】：

在 Gon gem 的帮助下可以简化将数据传递到 javascript
例如，在控制器中使用 gon 定义任何内容：

class FooController < ApplicationController

  def show_map
    #....
    gon.mapLatLong = [40.764698,-73.978972]

接下来，在你的视图中输出这个erb标签

<%= include_gon %>

该控制器中定义的 gon 值将在您的视图中更改为 javascript 变量。因此，您可以在 javascript 中这样编写它

center: new google.maps.LatLng(gon.mapLatLong[0],gon.mapLatLong[1]),

参考：
https://github.com/gazay/gon
http://railscasts.com/episodes/324-passing-data-to-javascript

【讨论】：

不应该是：center: new google.maps.LatLng(gon.mapLatLong[0],gon.mapLatLong[1]),

【解决方案4】：

查看以下页面，该页面解释了如何将数据传递给 JavaScript： http://railscasts.com/episodes/324-passing-data-to-javascript?view=asciicast

简而言之，只需使用：

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

然后在脚本中的任何位置引用 productsURL。

【讨论】：