我有一个Rails模板,该模板使用javascript_tag
将变量@user.lat
和@user.lng
提供给客户端,以便在生成Google地图的函数中使用。
问题是这些变量是动态的并且可以经常更改,但我的javascript标记只知道页面呈现时变量的值。当我点击我的应用程序(触发实际页面加载)时,我可以看到值发生了变化,但javascript_tag
中的值在初始页面加载后没有更新。
如何在没有刷新页面或编写代码的情况下在客户端上保持变量是最新的,以便反复向服务器查询这些变量?
答案 0 :(得分:2)
您正在采取的javascript_tag
方法不支持“观察”变量的变量。换句话说,您将数据提供给客户端的方法是“设置并忘记它”,客户端永远不会知道服务器上的值是否发生更改而没有重新加载页面。
另一种方法是使用预先推出的解决方案将动态服务器端数据发送到客户端,并密切关注它们的变化,例如Gon。具体来说,您可能需要查看该gem提供的the "watch" functionality。
另一种方法可能是编写一个函数,该函数对服务器进行AJAX调用,以便经常请求最新值。但是,你只需要手动推出一个与前一个建议完全相同的解决方案。
答案 1 :(得分:0)
'您正在采取的javascript_tag方法不支持“观察”变量的变量......'
是的,是的,即使我点击我的应用程序并重新加载页面,javascript_tag中的值也保持不变。就像我的js文件在启动我的应用程序时加载一样,@ user的纬度和经度值保持不变,即使它们应该更改,并且地图始终使用相同的坐标绘制。
'Gon'宝石对我来说也不起作用。很少的文档,特别是像我这样的新手。
成功了:
在我想要生成地图的页面上,show.html.erb:
<!-- This is here, to generate the user's latitude and longitude dynamically -->
<!-- The data-lat and lng attributes are used in 'initialise_google_maps' function, in scripts.js' -->
<div id="user-position" class="hidden" data-lat="<%= @user.lat %>" data-lng="<%= @user.lng %>"></div>
然后在我的scripts.js中:
function initialize_google_maps() {
var user_longitude = $("#user-position").attr("data-lng");
var user_latitude = $("#user-position").attr("data-lat");
var currentlatlng = new google.maps.LatLng(user_latitude, user_longitude);
var zoom = 10;
var myOptions = {
zoom: zoom,
center: currentlatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID
streetViewControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({map: map, position: currentlatlng, icon:{oppacity:0}});
var circle = new google.maps.Circle({
map: map,
fillOpacity: 0,
strokeWeight: 2,
strokeOpacity: 0.7,
radius: 10000,
});
circle.bindTo('center', marker, 'position');
}
现在就开始享受一种享受。