向/从 JavaScript 和 Rails 传递参数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8272147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 02:52:17  来源:igfitidea点击:

Passing parameters to/from JavaScript & Rails

javascriptruby-on-railsgoogle-maps

提问by thoughtpunch

In my Rails app I have a helper method locationthat gets the coordinates for a given IP address and makes them available across all controllers and views. For example location.latitudereturns the latitude of the user. You get the idea.

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

I also have some Javascript that draws a Map from the Google Maps API based upon a given lat/lon pair. The problem is that I have no idea how to pass the locationparams into the JavaScript!

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

The JavaScript resides in 'application.js' and looks like this:

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...
    //....................................
  };

The map itself gets called in the HTML like so. There isn't an obvious way to pass params.

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

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

I know this is probably an obvious question, but I've never had to pass a parameter from my application to Javascript this way before.

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

回答by Joe Steele

I think data attributeswork well here.

我认为数据属性在这里工作得很好。

html

html

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

or with your helpers

或与您的助手

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

js

js

$(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...
  //....................................
};

回答by Mikhail Nikalyukin

You can assign lat and long to the hidden fields in the view. And in your applicatons.js script just get them like $("#lat").val()Not the ultimate solution, but should work well.

您可以将 lat 和 long 分配给视图中的隐藏字段。在你的 applictons.js 脚本中,让它们像$("#lat").val()不是最终的解决方案,但应该运行良好。

回答by Aizzat Suhardi

Passing data into javascript can be simplified with the help of Gon gem
For example, define anything with gonin your controller:

借助 Gon gem 可以简化将数据传递到 javascript 中的过程,
例如,在控制器中使用gon定义任何内容:

class FooController < ApplicationController

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

Next, output this erb tag in your view

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

<%= include_gon %>

The gonvalues defined in that controller will be change into javascript variables in your views. Thus, you can write it like this in your javascript

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

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

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

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

回答by Dmitri Lihhatsov

Take a look at the following page that explains how to pass data to JavaScript: http://railscasts.com/episodes/324-passing-data-to-javascript?view=asciicast

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

In short, just use:

简而言之,只需使用:

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

And then refer to productsURL anywhere in your scripts.

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