Attributes vs Properties in Fable Elmish

问题

I am going through the book "Elm in Action" and trying to convert the application developed there to Fable-Elmish. Many things translate directly from Elm to Elmish but not everything (at least not directly). Right now I am trying to understand how to set properties on custom HTML element in Fable-Elmish. The book has an example of a JS Range object with the following script in the HTML file:

<link rel="stylesheet" href="http://elm-in-action.com/range-slider.css">
<script src="http://elm-in-action.com/range-slider.js"></script>
<script>
  class RangeSlider extends HTMLElement {
    connectedCallback() {
      var input = document.createElement("input");
      this.appendChild(input);

      var jsr = new JSR(input, {
        max: this.max,
        values: [this.val],
        sliders: 1,
        grid: false
      });
    }
  }

  window.customElements.define("range-slider", RangeSlider);
</script>

The Elm code to initialize this looks like this:

rangeSlider attributes children =
  node "range-slider" attributes children

viewFilter name magnitude =
  div [ class "filter-slider" ]
      [ label [] [ text name ]
      , rangeSlider
          [ max "11"
          , Html.Attributes.property "val" (Json.Encode.int magnitude)
          ]
          []
      , label [] [ text (String.fromInt magnitude) ]
]

The portion I am having trouble understanding is the difference between the max and HTML.Attributes.property attributes, and how to translate them into Fable-Elmish.

I have a similar block in my Elmish code that looks like this:

let rangeSlider attributes children =
  domEl "range-slider" attributes children

let viewFilter name magnitude =
  ... // other elements
  rangeSlider [ Max "11"
                HTMLAttr.Custom ("val", Encode.int magnitude)
              ] []
  ...

But this doesn't appear to be correct. I believe that domEl is the equivalent to node in Elm. I only found the Custom constructor and domEl function by trolling through the sources (the docs seem to be woefully lacking).

In the original Elm code it makes a distinction between max as an attribute and val as a property. It would appear that I am setting val as an attribute as well instead of a property. Is that the case? If so, how do I set the property correctly?

来源：https://stackoverflow.com/questions/61689542/attributes-vs-properties-in-fable-elmish

标签

fable-f#

elmish