Difference in th:replace vs th:insert when using variables

Suppose todos is a model attribute that has a List of TodoItemDto instances.

This works:

<ul class="todo-list" th:remove="all-but-first">
  <li th:each="item : ${todos}" th:insert="~{fragments :: todoItem(item)}">
  </li>
</ul>

Given fragments.html contains this:

<li th:fragment="todoItem(item)">
    <div class="view">
        <label th:text="${item.title}">Taste JavaScript</label>
    </div>
</li>

However, when using th:replace instead of th:insert like this:

<ul class="todo-list" th:remove="all-but-first">
  <li th:each="item : ${todos}" th:replace="~{fragments :: todoItem(item)}">
  </li>
</ul>

Then I get an error:

Property or field ‘title’ cannot be found on object of type ‘java.lang.String’ - maybe not public or not valid?

Any idea why this is?

What I find also strange is that it also does not work with th:insert if I rename item to myItem when calling the fragment (without changing anything to the fragment):

<ul class="todo-list" th:remove="all-but-first">
  <li th:each="myItem : ${todos}" th:insert="~{fragments :: todoItem(myItem)}">
  </li>
</ul>

This gives the same error that title cannot be found on object of type String.

For my usecase, I would really like to use th:replace to have cleaner HTML output if possible.

[wimdeblauwe]

I published a blog post about this now: https://www.wimdeblauwe.com/blog/2021/09/14/thymeleaf-iteration-and-fragments/

[ultraq]

Nice 🙂 And yeah I got a bit stuck figuring out why what you had a few posts back didn’t work, but good to see you’ve figured it out!