时间戳

首页 > 解决方案 > 定义一个使用 Javascript 的自定义标签，向它发送一些参数

javascript - 定义一个使用 Javascript 的自定义标签，向它发送一些参数

问题描述

我是我的前用户，JSF 2我非常喜欢它的复合材料，这让我可以避免大部分时间都javascript在我的 html 页面中。但是那个时代JSF 2已经结束了……

我现在正在使用Spring Boot 2and 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吗？

问候，

标签： javascriptjavathymeleaf

解决方案

我不知道 Thymeleaf 支持自定义标签，但您可以使用带有JavaScript 内联的参数化片段，例如

<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>

推荐阅读