Определите настраиваемый тег, который использует Javascript, отправив ему некоторые параметры
Я бывший пользователь JSF 2. Мне очень понравились его композиты, которые позволили мне в большинстве случаев избегать использования javascript на моих html-страницах. Но эпоха 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?
С уважением,
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>