Передача параметров в / из JavaScript и Rails

Question

В моем приложении Rails у меня есть вспомогательный метод location, который получает координаты для данного IP-адреса и делает их доступными для всех контроллеров и представлений. Например, location.latitude возвращает широту пользователя. Вы поняли.

У меня также есть некоторый Javascript, который рисует карту из API Карт Google на основе заданной пары широта / долгота. Проблема в том, что я не знаю, как передать параметры 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 таким образом.

Answer 1

Я думаю атрибуты данных здесь хорошо работают.

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>

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

Answer 2

Вы можете назначить lat и long скрытым полям в представлении.А в вашем скрипте applicationatons.js просто получите их как $("#lat").val() Не окончательное решение, но должно работать хорошо.

Answer 3

Передача данных в javascript может быть упрощена с помощью Gon gem
Например, определите что-нибудь с помощью 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

Answer 4

Посмотрите на следующую страницу, которая объясняет, как передавать данные в JavaScript: http://railscasts.com/episodes/324-passing-data-to-javascript?view=asciicast

Короче, просто используйте:

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

А затем обратитесь к productsURL в любом месте ваших сценариев.