Search code examples
elm

How to create HTML data attributes in Elm?

I need to tag my Elm.Http elements with custom "data-*" attributes, for example:

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

I have tried the following:

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

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

But this does nothing. Anyone know a way?

I think the problem is that Elm is actually setting JavaScript DOM attributes, so I really want to call element.dataset.row = "1" somehow.

The background is I need to expose some data to jQuery for my event handlers, because the Elm event library is missing a bunch of features I need, such as conditional preventDefault and form serialization. There are other ways to supply data via the DOM, but data-* attributes are by far the most straightforward.

Solution

  • You can use the attribute function instead.

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