3

我正在阅读“Elm in Action”一书，并尝试将在那里开发的应用程序转换为 Fable-Elmish。许多东西直接从 Elm 翻译成 Elmish，但不是所有东西（至少不是直接翻译）。现在我正在尝试了解如何在 Fable-Elmish 中的自定义 HTML 元素上设置属性。本书有一个JS Range对象的示例，HTML 文件中包含以下脚本：

<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>

初始化它的 Elm 代码如下所示：

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) ]
]

我难以理解的部分是max和HTML.Attributes.property属性之间的区别，以及如何将它们翻译成 Fable-Elmish。

我的 Elmish 代码中有一个类似的块，如下所示：

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

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

但这似乎并不正确。我相信这domEl相当于node榆树。我只是通过浏览源代码找到了Custom构造函数和domEl函数（文档似乎非常缺乏）。

在最初的 Elm 代码中，它区分了max作为属性和val作为属性。看来我也设置val为属性而不是属性。是这样吗？如果是这样，我该如何正确设置属性？

4

0 回答 0