Thymeleaf，Javascript內聯和迭代

使用Spring MVC和Thymeleaf，我構建了一個帶有JavaScript內部的html視圖。Thymeleaf，Javascript內聯和迭代

在頁面中，th：每個值都與迭代值一起使用，爲一組按鈕提供唯一的HTML id。

<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引用每個按鈕ID的問題。

在「另一個」視圖分辨率的語言，我會用代碼：

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

（上面可能不是100％語法正確，但我希望你的想法 - 我想要給這樣做可以使用上面的樣式）

但在Thymeleaf，雖然我知道我可以使用

th:inline="javascript"

引用單個模型的項目，我不看我怎麼可以使用一看就根在腳本塊中提供多個jQuery函數調用定義。

任何想法？（我可能正在接近完全錯誤的問題，所以我也接受這方面的新想法）

來源

2014-11-05 Chris Spiking

我會接受你的新想法邀請，並把我的方法論接近類似的案件。
顯然，問題主要是關於後端和JavaScript數據之間的通信。在這種情況下，javascript函數需要的數據作爲參數。由於html5引入了數據屬性以及在晚期版本中改進了jQuery的效率，因此您可以將任何需要的後端數據公開爲以「data-」開頭的屬性。根據html5，這是有效的。在jQuery中，您可以在減少初始「數據」修補符之後，通過將html命名約定轉換爲camelCase來訪問它們，就好像它們是jQuery數據一樣。（例如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

來源

2014-11-06 13:32:53 grid

所以我做了一個解決方法。

由於頁面中可以存在多個元素，因此我只需創建標記的外部循環併爲每個按鈕創建一個循環。在方法調用的細節將具有相同的索引/文本映射爲迭代創建擺在首位的按鈕，雖然文字創作是有點棘手：

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

不是最小的一次代碼生成，但它的工作原理。

來源

2014-11-06 09:22:29

Thymeleaf，Javascript內聯和迭代

回答

相關問題