scala - 如何用 Play 表单来表示动态表单？

Question

我有一个类似于测验/问卷类型设计的表格。

假设该页面是一个测验，它将在页面上显示动态数量的问题，每个问题都会有一个复选框选项列表(用户可以选择 1+ 个复选框)。

如何在游戏中表示这种类型的形式？

case class Quiz(id: Int, name: String)
case case Question(id: Int, quizId: Int, title: String)
case class QuestionOption(id: Int, questionId: Int, name:String)

所以你有一个测验，有很多问题。每个问题都有多个 QuestionOptions。

所以表格会是这样的:

case class QuizForm(quiz: Quiz, questions: List[Question], options: List[QuestionOption])

对于每个问题，您可以选择 1 个或多个 QuestionOption。

Answer 1

我会将 Question 嵌套在 Quiz 中，并将 QuestionOption 嵌套在 Question 中。这最终会使它变得更加紧凑。

case class Quiz(id: Int, name: String, questions: List[Question])
case class Question(id: Int, quizId: Int, title: String, options: List[QuestionOption])
case class QuestionOption(id: Int, questionId: Int, name: String)

Form 的可能实现将使用映射的列表:

val quizForm: Form[Quiz] = Form {
    mapping(
        "id" -> number,
        "name" -> nonEmptyText,
        "questions" -> list(mapping(
            "id" -> number,
            "quizId" -> number,
            "title" -> nonEmptyText,
            "options" -> list(mapping(
                "id" -> number,
                "questionId" -> number,
                "name" -> nonEmptyText
            )(QuestionOption.apply)(QuestionOption.unapply))
        )(Question.apply)(Question.unapply))
    )(Quiz.apply)(Quiz.unapply)
}

非常详细的部分是 HTML 表单，它需要包含所有这些字段。以下是表单发送的数据示例(一个问题，多个答案)。

val data = Map(
    "id" -> "1",
    "name" -> "My Quiz",
    "questions[0].id" -> "1",
    "questions[0].quizId" -> "1",
    "questions[0].title" -> "What?",
    "questions[0].options[0].id" -> "1",
    "questions[0].options[0].questionId" -> "1",
    "questions[0].options[0].name" -> "red",
    "questions[0].options[1].id" -> "2",
    "questions[0].options[1].questionId" -> "1",
    "questions[0].options[1].name" -> "green",
    "questions[0].options[2].id" -> "4",
    "questions[0].options[2].questionId" -> "1",
    "questions[0].options[2].name" -> "blue"
)

每个问题元数据/答案的name字段都需要具有将它们绑定(bind)在一起的唯一索引。这是一个粗略的例子:

<input type="hidden" name="id" value="1">
<input type="hidden" name="name" value="My Quiz">

<input type="hidden" name="questions[0].id" value="1">
<input type="hidden" name="questions[0].quizId" value="1">
<input type="hidden" name="questions[0].title" value="What?">

<input type="hidden" name="questions[0].options[0].id" value="1">
<input type="hidden" name="questions[0].options[0].questionId" value="1">
<input type="checkbox" name="questions[0].options[0].name" value="red">

<input type="hidden" name="questions[0].options[1].id" value="2">
<input type="hidden" name="questions[0].options[1].questionId" value="1">
<input type="checkbox" name="questions[0].options[1].name" value="green">

<input type="hidden" name="questions[0].options[2].id" value="3">
<input type="hidden" name="questions[0].options[2].questionId" value="1">
<input type="checkbox" name="questions[0].options[2].name" value="blue">

<input type="hidden" name="questions[0].options[3].id" value="4">
<input type="hidden" name="questions[0].options[3].questionId" value="1">
<input type="checkbox" name="questions[0].options[3].name" value="orange">

我们可以通过删除一些标题/名称字段并在 Form 中忽略它们来缩小范围，因为它们对于持久性来说不重要。但这很快就会变得相当冗长。

在这一点上，我通常会放弃 Form 并使用纯 JavaScript，因为 JSON 更容易处理(并且在我看来更容易阅读)。