如何在 Elm 中创建 HTML 数据属性？

Posted 2023-05-07

【中文标题】如何在 Elm 中创建 HTML 数据属性？

【英文标题】：How to create HTML data attributes in Elm?

【发布时间】：2015-10-29 17:15:42

【问题描述】：

我需要用自定义的“data-*”属性标记我的 Elm.Http 元素，例如：

<tr data-row="1">...</tr>

我尝试了以下方法：

import html exposing (..)
import Html.Attributes exposing (..)
import Json.Encode as JsEncode

view ... =
  tr [ property "data-row" (JsEncode.string (toString 1)) ]

但这无济于事。有人知道方法吗？

我认为问题在于 Elm 实际上是在设置 javascript DOM 属性，所以我真的很想以某种方式调用 element.dataset.row = "1"。

背景是我需要为我的事件处理程序向 jQuery 公开一些数据，因为 Elm 事件库缺少我需要的一堆功能，例如条件 preventDefault 和表单序列化。还有其他通过 DOM 提供数据的方法，但 data-* 属性是迄今为止最直接的。

【参考方案1】：

您可以改用attribute 函数。

view ... =
    tr [ attribute "data-row" "1" ]

【讨论】：

如何添加空数据标签？

如果您在attribute 和property 之间有点困惑或困惑，可能值得一试：-github.com/elm/html/blob/master/properties-vs-attributes.md