Play Framework:如何从Scala模板调用Javascript函数
Play Framework:如何从Scala模板调用Javascript函数
提问于 2015-06-10 23:25:28
我有一个scala模板，它显示了一组Model对象，并为用户提供了添加或删除这些对象的选项。
每个模型对象都有一些与之相关联的位置数据。我想在页面上嵌入一个Google map，当用户操作(添加、删除、编辑、加载)时，在地图上为每个Model对象放置一个标记。
我可以正确地加载地图，但是我不知道如何直接从Scala模板调用我的JS函数。我的模板如下所示：
@(stupas:List[Stupa], stupaForm:Form[Stupa])
@import helper._
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=apiKey"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
console.log("map should be init now");
}
google.maps.event.addDomListener(window, 'load', initialize);
function addLocation(lat, lon, name) {
var latLng = new google.maps.LatLng(lat,lon);
var marker = new google.maps.Marker({
position: myLatlng,
title:name
});
marker.setMap(map);
}
</script>
</head>
<body>
<h1> Stupas Overview </h1>
<div id="map_canvas" style="height: 430px; width: 512px; float:right; top:0px"></div>
<ul>
@for(stupa <- stupas) {
<li>@stupa.stupaName</li>
<ul>
<li>Description: @stupa.descritpion</li>
<li>Latitude: @stupa.latitude</li>
<li>Longitude: @stupa.longitude</li>
<img src="@routes.StupaController.getImageForStupa(stupa.stupaName)"/>
@form(routes.StupaController.delete(stupa.stupaName)) {
<input type="submit" value="Remove Stupa">
}
</ul>
}
</ul>
@helper.form(action = routes.StupaController.submit, 'enctype -> "multipart/form-data") {
@helper.inputText(stupaForm("stupaName"))
@helper.inputText(stupaForm("description"))
@helper.inputText(stupaForm("latitude"))
@helper.inputText(stupaForm("longitude"))
@helper.inputFile(stupaForm("picture"))
<button type="submit" onclick="" name="addPrayer" >Submit Stupa</button>
}
</body>我希望能够调用addLocation()函数。
Stack Overflow用户
发布于 2015-06-11 13:45:18
Scala模板不能调用javascript函数，因为scala模板只是在服务器端渲染页面，而javascript函数需要在加载页面时/之后从浏览器执行。因此，您可以在脚本中创建document.ready函数，并在其中调用addLocation()函数，使用scala打印函数调用中参数。所以我的想法是，当你的浏览器执行函数时，它将显示的是值，而不是参数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30760730
复制相关文章
相似问题
腾讯云开发者
