Question

我以前是JSF 2的用户，我对其组合很满意，这使我大部分时间都避免在html页面中使用所有javascript。但是JSF 2的时代已经结束...

我现在正在使用Spring Boot 2和Thymeleaf，而Thymeleaf是我第一次使用它。

我有一个Openlayers的简单示例，它显示了一个地图（提供了一些附加<script src=...>，这里没有显示它们来声明Openlayers，当然还有一些其他的html标签；它直接来自来自http://openlayers.org/en/latest/doc/quickstart.html）：

<div id="map" class="map"></div>

<script type="text/javascript">
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
  });
</script>

我想找到一种方法，让我的html页面具有自定义标记，例如：

<myMaps:display target="map" longitude=37.41 latitude=8.82 zoom=4 />

至少会生成示例的<script>部分，并最多在其上方收集<div>标签。

我可以使用Thymeleaf吗？

此致

Answer 1

我不知道Thymeleaf支持自定义标签，但是您可以将parameterised fragment与JavaScript inlining配合使用，例如

<th:block th:fragment="myMaps(target, longitude, latitude, zoom)">
    <div th:id="${target}" class="map"></div>

    <script th:inline="javascript">
        var map = new ol.Map({
            target: [[${target}]],
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            view: new ol.View({
              center: ol.proj.fromLonLat([
                  [[${longitude}]], 
                  [[${latitude}]]
              ]),
              zoom: [[${zoom}]]
            })
          });
      </script>
</th:block>

并通过

添加

<div th:replace="::myMaps ('map', 37.41, 8.82, 4)"></div>

或

<div th:replace="::myMaps (target='map',longitude=37.41,latitude=8.82,zoom=4)"></div>

定义一个使用Javascript的自定义标签，并向其发送一些参数

1 个答案: