为 thymeleaf 中的选择多个元素创建一个片段

Question

我正在尝试为我的 web 应用程序中的多选字段创建一个片段。但是我遇到了关于传递应该绑定到选择元素的字段的各种问题。我想我有一个语法错误，但我不确定它是什么。

对于 addUser.jsp 文件中的 selectedField，我尝试过 ${selectedAdminAccess}、*{selectedAdminAccess}、${userForm.selectedAdminAccess} 等。

通过这些不同的组合，在 forms.html 文件中，我尝试了 ${selectField}、*{selectField} 和预处理器指令：${__${selectField}__}。我是不是错过了正确的组合？

我得到的错误是“Bean name 'X' 的 BindingResult 和普通目标对象都不能用作请求属性”。其中 X 是（对于预处理器尝试）在 addUser.jsp 页面中输入的字段名，或者在不使用预处理器尝试时为“selectField”。

这就是我所拥有的。

控制器

@GetMapping(value={"/adduser"}
public ModelAndView getAddUserPage(Model model, @RequstParam(required = false) Long selectedUserId) {

   ModelAndView mav = new ModelAndView("/addUser");
   UserForm userForm = new UserForm();
   mav.addObject("userForm", userForm);
   return mav;
}

模型用户窗体

public class UserForm {
    private List<Office> adminAccess = new ArrayList<>();
    private List<String> selectedAdminAccess = new ArrayList<>();
// Getter/Setter 
...
}

addUser.jsp

<form method="post" action="#" data-th-action="@{/addUser}" data-th-object="${userForm}">
   <!-- other interesting page stuff -->
   <div data-th-replace="fragments/forms.html :: multi-select(
      id='adminSelect',
      selectClass='office-target',
      selectField='*{selectedAdminAccess}',
      optionList='*{adminAccess}',
      optionListValue='id',
      optionListText='name',
      size=8)"></div>
</form>

forms.html

<div data-th-fragment="multi-select(id, selectClass, selectField, optionList, optionListValue, optionListText, size)" >
    <select id="${id}" class="mdb-select colorful-select md-form ${selectClass}" size="${size}" multiple
            searchable data-th-field="${__${selectField}__}">
        <option data-th-each="option : ${adminAccess}"
                data-th-value="${option.__${optionListValue}__}"
                data-th-text="${option.__${optionListText}__}"></option>
    </select>

</div>

Answer 1

这里的最终目标是有一个表达式data-th-field="*{selectedAdminAccess}"来完成这个：

• 对于selectField，您需要传递一个值为'selectedAdminAccess' 的字符串。
• 对于th:field，使用预处理表达式*{__${selectField}__}。

您提供的 HTML 看起来有其他问题...但我认为您的最终 HTML 将如下所示：

<!-- page -->
<form method="post" action="#" data-th-action="@{/addUser}" data-th-object="${userForm}">
  <!-- other interesting page stuff -->
  <div data-th-replace="fragments/forms.html :: multi-select(
    id='adminSelect',
    selectClass='office-target',
    selectField='selectedAdminAccess',
    optionList=*{adminAccess},
    optionListValue='id',
    optionListText='name',
    size=8
  )" />
</form>

<!-- fragment -->
<div data-th-fragment="multi-select(id, selectClass, selectField, optionList, optionListValue, optionListText, size)" >
    <select data-th-id="${id}"
            data-th-class="|mdb-select colorful-select md-form ${selectClass}|"
            data-th-size="${size}"
            multiple
            searchable
            data-th-field="*{__${selectField}__}">
        <option data-th-each="option : ${optionList}"
                data-th-value="${option.optionListValue}"
                data-th-text="${option.optionListText}" />
    </select>
</div>

Answer 2

使用上面的 Metroids 答案，这是对我有用的最终解决方案：

<!-- page -->
<form method="post" action="#" data-th-action="@{/addUser}" data-th-object="${userForm}">
  <!-- other interesting page stuff -->
  <div data-th-replace="fragments/forms.html :: multi-select(
    id='adminSelect',
    selectClass='office-target',
    selectField='selectedAdminAccess',
    optionList='adminAccess',
    optionListValue='id',
    optionListText='name',
    size=8
  )"></div>
</form>

<!-- fragment -->
<div data-th-fragment="multi-select(id, selectClass, selectField, optionList, optionListValue, optionListText, size)" >
    <select data-th-id="${id}"
            data-th-class="|mdb-select colorful-select md-form ${selectClass}|"
            data-th-size="${size}"
            multiple
            searchable
            data-th-field="*{__${selectField}__}">
        <option data-th-each="option : ${__${optionList}__}"
                data-th-value="${option.__${optionListValue}__}"
                data-th-text="${option.__${optionListText}__}" />
    </select>
</div>

将值和文本设置成这样的原因是允许传入更动态的对象。文本可以是名称、描述或其他任何内容。该值可以是一个 id，或文本值，或其他任何东西。我从https://www.northcoder.com/2019/11/thymeleaf-look-at-two-of-its-most.html 和他们在页面上链接的 github 项目中学到的那种风格。

疯狂的是，现在我看到了答案，它一直盯着我看（这就是值和文本的使用方式。）