如何在 Rails 7 的表单选择中包含类和数据属性？

Question

在我的 Rails 7 应用程序中，我正在使用 Stimulus 并且需要将 data 属性添加到表单 select 以将其链接到 JavaScript 控制器。我还尝试使用 class 格式化字段（不是选项）。

这是表单选择元素：

<%= f.select(:repeat, Batch.repeats, {class: "class_name"}, { data: { batch_repeat_target: "input", action: "change->batch-repeat#toggle" }}) %>

上面的代码导致将 data 属性应用于选择字段，但将 class 排除在外。

我也尝试翻转class和data属性，如下：

<%= f.select(:repeat, Batch.repeats, { data: { batch_repeat_target: "input", action: "change->batch-repeat#toggle" }}, { class: "class_name" }) %>

结果与第一种方法相反：这次，field 是按类设置样式的，但数据属性未与 select 元素相关联。

根据this question，我意识到：

select helper 接受两个选项哈希值，一个用于选择，另一个 第二个用于 html 选项。所以你需要做的就是默认为空 选项作为项目列表后的第一个参数，然后将您的课程添加到 html_options。

从那里开始，我认为我需要在第一个选项散列中包含 class 和 data 属性，并将第二个留空，如下所示：

<%= f.select(:repeat, Batch.repeats, { { class: "class_name" }, { data: { batch_repeat_target: "input", action: "change->batch-repeat#toggle" }}}, {}) %>

但是，上述修改后的代码导致ActionView::SyntaxErrorInTemplate in BatchesController#new 错误。

在另一次尝试中，我尝试打乱顺序，将第一个选项散列留空，并在第二个选项中同时包含 class 和 data 属性，如下所示：

<%= f.select(:repeat, Batch.repeats, {}, { { class: "class_name" }, { data: { batch_repeat_target: "input", action: "change->batch-repeat#toggle" }}}) %>

该修订还导致 ActionView::SyntaxErrorInTemplate in BatchesController#new 错误。

上面提到的问题已经超过 11 年了：现在是否有不同的约定，特别是在 Rails 7 中，关于表单选择元素？我如何在此处同时包含 class 和 data 属性？

Answer 1

哈希看起来像这样：{ key1: value1, key2: value2 }

因此，采用您尝试的代码：{ { class: "class_name" } } - 内部哈希是 { class: "class_name" }，所以让我们将其分配给一个变量：value1 = { class: "class_name" } 然后让我们在您尝试的代码中使用该变量：{ value1 }

看看这不是散列，没有值的键。哈希必须始终具有键和值。这就是为什么您在后两个示例中出现语法错误的原因。

那么让我看看你的其他两次尝试：

<%= f.select(:repeat, Batch.repeats, {class: "class_name"}, { data: { batch_repeat_target: "input", action: "change->batch-repeat#toggle" }}) %>

所以在这里，:repeat 是第一个参数，Batch.repeats 是第二个，第三个参数（应该是 select 选项）是具有单个键/值对的散列：{ class: "class_name" }，以及第四个参数（应该是 html 选项）是具有单个键/值对的散列：{ data: { the: data, hash: here }

你的第二次尝试：

<%= f.select(:repeat, Batch.repeats, { data: { batch_repeat_target: "input", action: "change->batch-repeat#toggle" }}, { class: "class_name" }) %>

前两个参数相同，第三个参数（选择选项）现在是带有 :data 键/值的散列，第四个参数（html 选项）现在是带有单个 :class 键/值的散列。

您想要做的是为第三个参数（选择选项）提供一个空散列，然后为第四个参数（html 选项）提供一个包含两个键/值对的散列：

{ class: "class_name", data: { the: data, hash: here } }

（注意，我故意没有给你完整的答案，因为我觉得你是那种会从自己发现它中受益的人，但如果我判断错误，请告诉我，很高兴编辑这个答案，如果你需要它）