使用Rails數據實現Javascript功能

Question

如何訪問@location.coordinates數據並將其用於查詢的GetMarineWeather()函數中？

我希望能夠使用rails數據並加載查詢座標。

如何在最初加載頁面時訪問座標並填充函數？

<p id="notice"><%= notice %></p> 

<p><strong>Name:</strong><%= @location.name %></p> 

<p><strong>Sub region:</strong><%= @location.sub_region %></p> 

<p><strong>Region:</strong><%= @location.region %></p> 

<p><strong>Coordinates:</strong><%= @location.coordinates %></p> 

<div id="resultContainer"></div> 


<!-- *********************************************************************** --> 


<script type="text/javascript"> 

    var resultContainer = $('#resultContainer'); 
    var output = ''; 


    $(document).ready(function() { 
    GetMarineWeather(); 
    }); 


    function GetMarineWeather(e) { 
    var marineWeatherInput = { 
     query: '26.16,-80.10', 
     format: 'JSON', 
     fx: '', 
     callback: 'MarineWeatherCallback' 
    }; 
    JSONP_MarineWeather(marineWeatherInput); 
    e.preventDefault(); 
    } 


    function MarineWeatherCallback(marineWeather) { 

     output = "<br/> Date: " + marineWeather.data.weather[0].date; 
     output += "<br/> Min Temp (f): " + marineWeather.data.weather[0].mintempF; 
     output += "<br/> Max Temp (f): " + marineWeather.data.weather[0].maxtempF; 
     output += "<br/> Cloud Cover: " + marineWeather.data.weather[0].hourly[0].cloudcover; 

     resultContainer.empty(); 
     resultContainer.html(output); 

    } 

</script> 

Answer 1

這是常見的對HTML標籤設置data-屬性與大家分享JavaScript的服務器端信息。

<div id="coordinates" data-coordinates="<%= @location.coordinates %>"></div> 

之後，你只需用JS閱讀：

$('#coordinates').data('coordinates') 

Answer 2

如果您只需要在頁面加載，你永遠可以直接打印在你的JavaScript來獲取信息。

這樣的：

$(document).ready(function() { 
    GetMarineWeather('<%= @location.coordinates %>'); 
}); 

如果信息需要重新加載，我可能會去的XMLRequest解決方案。

Answer 3

這裏就是我推薦路過的Rails從視圖JavaScript函數瓦爾：

<%= javascript_tag "GetMarineWeather(#{@location.coordinates.to_json});" %> 

您可能需要在應用.to_json

<%= javascript_tag "GetMarineWeather((#{@latitude.to_json}, #{@longitude.to_json}));" %> 

Answer 4

之前拆分座標+長LAT除此之外，還有一種叫做'gon'的酷寶石 https://github.com/gazay/gon