如何在 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属性被应用到选择字段，但保留了classout。

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

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

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

根据这个问题，我意识到：

selecthelper 采用两个选项哈希，一个用于 select，第二个用于 html 选项。因此，您所需要做的就是在项目列表之后提供默认的空选项作为第一个参数，然后将您的类添加到 html_options.

从那里开始，我认为我需要在第一个选项哈希中包含 theclass和 thedata属性，并将第二个选项哈希保留为空，如下所示：

<%= 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 中，关于表单选择元素是否有不同的约定？我如何在这里同时包含 aclass和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 } }

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