Set
その項目のプロパティ パスを作成できないため、MVC でバインディング ターゲットとして使用することはできません。
何を使うべきか
Map<Integer, YourType>
動的フォームを構築するときに使用する必要があります。私たちが何度も実装したことは(私はそれが機能していることを知っています)これです:
- 実際のアイテムとは関係なく、単純な数列がキーとして使用されます
- キー シーケンスは常に増加しますが、連続している必要はありません (たとえば、ユーザーが 2 番目の項目を削除した場合、最終的には になります
1, 3, 4, ...
)
- 別のアイテムを追加したい場合は、最大数を見つけてから、インデックス付きのフォームを追加します
maxIndex + 1
(常に増加するシーケンス)
- 反復順序が保持されるように、
Map
実装はのインスタンスである必要があります (フィールドに自動入力する必要があるLinkedHashMap
場合、Spring はデフォルトでこの実装を作成します)。Map
- これは、Spring がプロパティ getter からジェネリック型を推測できるように、何らかの親フォーム オブジェクトの一部である
Map
必要があります (つまり、トップ フォーム オブジェクトとして持つことはできません)。Map
ビューと JavaScript の実装例
これを処理する方法はたくさんあります。たとえば、別のサブフォームを動的に追加する必要がある場合に使用する、特別なテンプレート サブフォームがあります。このアプローチは、おそらく従うのが少し複雑です。
<form:form action="${formUrl}" method="post" modelAttribute="organizationUsersForm">
<%-- ... other fields ... --%>
<div id="userSubforms">
<c:forEach items="${organizationUsersForm.users.entrySet()}" var="subformEntry">
<div data-subform-key="${subformEntry.key}">
<spring:nestedPath path="users['${subformEntry.key}']">
<%@ include file="user-subform.jspf" %>
</spring:nestedPath>
</div>
</c:forEach>
</div>
<button onclick="addSubform(jQuery('#userSubforms'), 'users', 'user', 'userTemplate');">ADD ANOTHER USER</button>
<%-- other form fields, submit, etc. --%>
</form:form>
<div class="hide" data-subform-template="user">
<spring:nestedPath path="userTemplate">
<%@ include file="user-subform.jspf" %>
</spring:nestedPath>
</div>
<script>
function addSubform(subformContainer, subformPath, templateName, templatePath) {
// Find the sequence number for the new subform
var existingSubforms = subformContainer.find("[data-subform-key]");
var subformIndex = (existingSubforms.length != 0) ?
parseInt(existingSubforms.last().attr("data-subform-key"), 10) + 1 : 0;
// Create new subform based on the template
var subform = jQuery('<div data-subform-key="' + subformIndex + '" />').
append(jQuery("[data-subform-template=" + templateName + "]").children().clone(true));
// Don't forget to update field names, identifiers and label targets
subform.find("[name]").each(function(node) {
this.name = subformPath + "["+ subformIndex +"]." + this.name;
});
subform.find("[for^=" + templatePath + "]").each(function(node) {
this.htmlFor = this.htmlFor.replace(templatePath + ".", subformPath + "["+ subformIndex +"].");
});
subform.find("[id^=" + templatePath + "]").each(function(node) {
this.id = this.id.replace(templatePath + ".", subformPath + "["+ subformIndex +"].");
});
// Add the new subform to the form
subformContainer.append(subform);
}
</script>
これで、 「ユーザーがサブフォームを削除するにはどうすればよいですか」と尋ねることができますか? サブフォーム JSPF に以下が含まれている場合、これは非常に簡単です。
<button onclick="jQuery(this).parents('[data-subform-key]').remove();">DELETE USER</button>