版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。 https://blog.csdn.net/Frank_Adam/article/details/79438563
Mark一個關(guān)于Thymeleaf 使用th:field屬性與對象屬性綁定的小問題

最近在嘗試用Spring Boot + Thymeleaf搭建一個個人博客，其中Article類中有一個屬性如下定義：

private List<String> contentParagraphs;

需求是將前端頁面的textarea文本域與contentParagraphs屬性綁定，而前端頁面的textarea大部分是經(jīng)由javascript代碼生成的：

var $textArea = $("<textarea></textarea>");
$textArea.attr("some attr","some value");
...
$inputField.append($textArea);

像這樣，使用JS代碼往網(wǎng)頁中動態(tài)添加一個輸入域。頁面中默認具有一個輸入域（綁定一個段落），點擊按鈕可以增加一個輸入域。

比較關(guān)鍵的，默認輸入域域中用于和段落進行綁定的前端代碼如下，主要是th:field屬性起到綁定作用，這樣使這個textarea綁定到contentParagraphs[0]，即第一個段落。

  <textarea th:field="${article.contentParagraphs[0]}"      id="contentParagraph0" required="required" class="materialize-textarea"></textarea>

那么如何將增加的輸入域和下一個段落進行綁定呢？很自然地會沿用默認域的寫法，但是把中括號里的0改成其他數(shù)字就行了。所以一開始我的JS代碼是這樣的：

    $textArea.attr("th:field","${article.contentParagraphs["+currentLocation+"]}");

但是這樣點擊提交按鈕后，后臺只接收到了默認輸入域的文本。很揪心。

不過通過Chrome瀏覽器的檢查元素功能，查看默認輸入域的HTML代碼如下：

<textarea id="contentParagraph0" required="required" class="materialize-textarea" name="contentParagraphs[0]"></textarea>

是不是很驚訝！壓根沒有th:field屬性，而變成了name=contentParagraphs[0]屬性。再查看增加的輸入域HTML代碼如下：

<textarea id="contentParagraph1" required="required" class="materialize-textarea" th:field="${article.contentParagraphs[1]}"></textarea>

終于發(fā)現(xiàn)問題所在了吧！推測這是因為Thymeleaf在瀏覽器解析頁面的時候把th:field屬性自動轉(zhuǎn)換成name屬性了。所以把JS中綁定段落的代碼改成設置name屬性就OK了。

  $textArea.attr("name","contentParagraphs["+currentLocation+"]");