将参数传递给JavaScript以及从/轨道 [英] Passing parameters to/from JavaScript & Rails

问题描述

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

我也有一些Javascript，它根据给定的经纬度对从Google Maps API绘制地图。问题是，我不知道如何将 位置 params传递到JavaScript！

$ b

  $（document）.ready（function（ ）
 {
 
 //映射选项...我希望params进入
 
下面的var'MapOptions'function initialize（）{
 var mapOptions = {
 center：new google.maps.LatLng（40.764698，-73.978972），
 zoom：13，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} ; 
 
 //设置并绘制地图... 
 // ......................... ........... 
}; 
  

地图本身获取

 < div id =map_canvas > 
<！ - 地图在此绘制！ - > 
< / div> 
  

我知道这可能是一个显而易见的问题，但我从来没有必要从我的应用程序传递参数到Javascript这种方式。

我认为<一个href =http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data-with-the-data-attributes>数据属性在这里很好用。

html

 < div id =map_canvasdata -latitude =40.764698data-longitude = -  73.978972> 
 <！ - 地图在这里绘制！ - > 
< / div> 
  

或与您的助手

 < div id =map_canvasdata-latitude =<％= location.latitude％> data-longitude =<％= location.longitude％>> 
 <！ - 地图在这里绘制！ - > 
< / div> 
  

  $（document）.ready（function（）{
 
 // Map options ...我希望params进入
 $ b $下面的var'MapOptions' b函数initialize（）{
 var mapDiv = $（'＃map_canvas'）; 
 var lat = mapDiv.data（'latitude'），
ng = mapDiv.data（'longitude' ）; 
 
 var mapOptions = {
 center：new google.maps.LatLng（lat，lng），
 zoom：13，
 mapTypeId：google.maps。 MapTypeId.ROADMAP 
}; 
 
 //设置并绘制地图... 
 // ................. ................... 
}; 
  

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

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 location params into the JavaScript!

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

$(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.

<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.

解决方案

I think data attributes work well here.

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

$(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以及从/轨道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！