Thymeleaf, Вставка и итерация Javascript

Question

Использование Spring MVC и Thymeleaf, я создаю html-представление с некоторым javascript внутри.

Внутри страницы, th: каждый используется с итерационными значениями, чтобы задать набор кнопок с уникальным идентификатором HTML.

<td th:each="optionValue,iterStat : ${someObject.optionValues}"> 
    <button class="btn btn-default" th:id="${'optionBtn_' + (iterStat.count - 1)}" th:text="${optionValue.toString()}" /> 
</td> 

Моя проблема возникает при попытке сгенерировать JavaScript, который будет использовать ссылку JQuery для каждой кнопки ид.

В «другой» язык разрешения зрения, я хотел бы использовать код:

<% for(var i = 0; i < someObject.optionValues.length; i++) { %> 
    $('#optionBtn_<%- i %>').on("click", function() { 
     doSomething('<%= someObject.optionValues[i] %>'); 
    }); 
<% } %> 

(выше, не может быть 100% синтаксически правильно, но я надеюсь, что вы получите идею - то, что я пытаюсь сделать это можно с помощью вышеуказанного стиля)

но в Thymeleaf, в то время как я понимаю, что я могу использовать

th:inline="javascript" 

ссылаться на отдельные элементы модели, я не могу видеть, как я могу использовать взгляд на ген стирать несколько определений вызовов функции jQuery в блоке сценария.

Любые идеи? (Возможно, я совершенно не согласен с проблемой, поэтому открываю новые идеи на этом фронте)

Answer 1

Я приму ваше приглашение на новые идеи и поставлю на стол свою методологию приближения к аналогичным случаям.
Очевидно, что проблема в основном связана с обменом данными между внутренними и javascript-данными. Данные, которые функция javascript нуждается в аргументе в этом случае. С введением html5 атрибутов данных и улучшенной эффективностью jQuery с ними в поздних версиях вы можете выставлять любые конечные данные, которые вы хотите использовать как атрибуты, начинающиеся с «data-». Это действительно согласно html5. В jQuery вы можете получить к ним доступ, как если бы они были данными jQuery, переведя соглашение об именах html в camelCase после сокращения исходного «data-» pefix. (например, data-my-attribute = myAttribute). Вы можете либо получить к ним доступ в исходном html-соглашении (например, my-attribute). Это вопрос предпочтения.

Тогда ваш HTML может быть гораздо чище:

<td th:each="optionValue,iterStat : ${someObject.optionValues}"> 
    <button class="btn btn-default" th:id="${'optionBtn_' + (iterStat.count - 1)}" th:text="${optionValue.toString()}" th:attr="data-my-func-attr=${optionValue}"/> 
</td> 

Вы можете связать обработчики событий, то как:

$("button.btn").on("click", function() { 
     buttonPressed($(this).data("my-func-attr")) 
} 

или аналогичный.

Таким образом, вы также сохраняете свой код более чистым и отделенным от разметки, который является одним из принципов: Unobtrusive JS

Answer 2

Так что я сделал обходное решение.

Поскольку несколько элементов могут существовать на странице, я просто создаю внешний цикл тега и создаю его для каждой кнопки. Подробности в вызове метода будет иметь тот же индекс/текстовое отображение как в итерации, чтобы создать кнопки в первую очередь, хотя создание текста было немного сложнее:

<script th:each="optionValue,iterStat : ${someObject.optionValues}"> 
    $([[${'#optionBtn_' + (iterStat.cont - 1)}]]).on("click", function() { 
     buttonPressed([[${iterStat.count - 1}]], [[${estimateOption.toString()}]]); 
    }); 
</script> 

Не самый маленький когда-код но он работает.