美文网首页
排忧解难之Mark一个关于Thymeleaf 使用th:fiel

排忧解难之Mark一个关于Thymeleaf 使用th:fiel

作者: 行者和他的钢笔 | 来源:发表于2019-04-16 10:45 被阅读0次

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Frank_Adam/article/details/79438563
Mark一个关于Thymeleaf 使用th:field属性与对象属性绑定的小问题

最近在尝试用Spring Boot + Thymeleaf搭建一个个人博客,其中Article类中有一个属性如下定义:

private List<String> contentParagraphs;

需求是将前端页面的textarea文本域与contentParagraphs属性绑定,而前端页面的textarea大部分是经由javascript代码生成的:

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

像这样,使用JS代码往网页中动态添加一个输入域。页面中默认具有一个输入域(绑定一个段落),点击按钮可以增加一个输入域。

默认情况: 点击加号按钮:

比较关键的,默认输入域域中用于和段落进行绑定的前端代码如下,主要是th:field属性起到绑定作用,这样使这个textarea绑定到contentParagraphs[0],即第一个段落。

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

那么如何将增加的输入域和下一个段落进行绑定呢?很自然地会沿用默认域的写法,但是把中括号里的0改成其他数字就行了。所以一开始我的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>

终于发现问题所在了吧!推测这是因为Thymeleaf在浏览器解析页面的时候把th:field属性自动转换成name属性了。所以把JS中绑定段落的代码改成设置name属性就OK了。

  $textArea.attr("name","contentParagraphs["+currentLocation+"]");
点击提交按钮,后台成功接收到增加的输入域文本(后台代码打印contentParagraphs属性)。

相关文章

网友评论

      本文标题:排忧解难之Mark一个关于Thymeleaf 使用th:fiel

      本文链接:https://www.haomeiwen.com/subject/ommvwqtx.html