Определите пользовательский тег, который использует Javascript, отправив ему некоторые параметры

Question

Я бывший пользователь JSF 2 Мне очень понравились его композиции, которые позволили мне в большинстве случаев избегать javascript на моих html-страницах.Но эра JSF 2 закончилась ...

Я сейчас использую Spring Boot 2 и Thymeleaf, и Thymeleaf Я использую это впервые.

Iиметь этот простой образец 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 поддерживает пользовательские теги, но вы можете использовать параметризованный фрагмент с включением 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>