Play Framework：如何从 Scala 模板调用 Javascript 函数答案

【问题标题】：Play Framework: How to call a Javascript Function from a Scala TemplatePlay Framework：如何从 Scala 模板调用 Javascript 函数
【发布时间】：2015-06-10 15:25:28
【问题描述】：

我有一个 scala 模板，它显示了一堆 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() 函数。

【问题讨论】：

标签： javascript scala google-maps playframework

【解决方案1】：

Scala 模板不能调用 javascript 函数，因为 scala 模板只是在服务器端渲染页面，并且 javascript 函数需要在加载页面时/之后从浏览器执行。因此，在您的脚本中，您可以创建 document.ready 函数并在其中调用 addLocation() 函数，使用 scala 在该函数调用中打印参数。所以想法是，当您的浏览器执行该函数时，它将向您显示值而不是参数。

【讨论】：

我实际上想出了如何做到这一点。我会提供一个答案。谢谢！