46

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.

wmakley
  • 1,233
  • 9
  • 18

1 Answers1

66

You can use the attribute function instead.

view ... =
    tr [ attribute "data-row" "1" ]
Community
  • 1
  • 1
robertjlooby
  • 7,160
  • 2
  • 33
  • 45
  • 1
    How do you add empty data tags? – Kevin Brown Nov 20 '18 at 01:14
  • 2
    If you're in a bit of puzzled or befuddlement between `attribute` vs `property`, might be worth checking out this: - https://github.com/elm/html/blob/master/properties-vs-attributes.md – lenards Feb 26 '20 at 16:42