Question

我有一个scala模板，它显示了一堆Model对象，并为用户提供了添加或删除这些对象的选项。

每个模型对象都有一些与之关联的位置数据。我想在页面上嵌入Google地图，当用户操作（添加，删除，编辑，加载）时，会在地图上为每个模型对象放置一个标记。

我可以正确加载地图，但我不明白如何直接从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（）函数。

Answer 1

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

Play框架：如何从Scala模板调用Javascript函数

1 个答案: