3

在我之前的问题之后，我在“Elm in Action”（并尝试移植到 Fable-Elmish）中处理的示例具有来自自定义元素的自定义事件。在 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
      });

      var rangeSliderNode = this;

      jsr.addEventListener("update", function(elem, value) {
        var event = new CustomEvent("slide", {
          detail: {userSlidTo: value}
        });

        rangeSliderNode.dispatchEvent(event);
      });
    }
  }

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

在书中的示例中（当然是在 Elm 中），接收事件的第一步是执行以下操作：

onSlide : (Int -> msg) -> Attribute msg
onSlide toMsg =
  let
    detailUserSlidTo : Decoder Int
    detailUserSlidTo =
        at [ "detail", "userSlidTo" ] int

    msgDecoder : Decoder msg
    msgDecoder =
        Json.Decode.map toMsg detailUserSlidTo
in
    on "slide" msgDecoder

可以简化为：

onSlide : (Int -> msg) -> Attribute msg
onSlide toMsg =
  at [ "detail", "userSlidTo" ] int
    |> Json.Decode.map toMsg
    |> on "slide"

然而，在 Elmish 中，我找不到与on. 我想出了：

let onSlide (toMsg: int -> Msg) =
  Decode.at ["detail", userSlidTo"] Decode.int
  |> Decode.map toMsg
  |> ... // Now what!?

我已经查看了所有我能想到的可能适用的来源，但找不到监听自定义事件的方法。而且，该文档没有提供任何我发现的如何执行此操作的示例或解释。

必须有一种方法可以连接到 Elmish 中的自定义事件，但我无法在任何地方找到它。在两种环境中做同样事情的方法是否不同？

4

1 回答 1

2

因此，为了回答我自己的问题，Elmish 的工作方式似乎与 Elm 在这种情况下的工作方式不同。该机制似乎是在 Elmish 中设置订阅，类似于：

let sliderSub  (initial: model) =
    let sub dispatch =
        window.addEventListener ("slide, fun evt ->
            let detail = <decode event details>
            match detail with
            | Ok slidEvt -> <dispatch a Cmd based on the details>
            | _ -> ()
        )
    Cmd.ofSub sub

Program.mkProgram init update view
|> Program.withSubscription sliderSub
...

我还没有让这个工作，因为还有其他问题需要处理，但这似乎是 Elmish 所需的方法。

于 2020-05-14T22:20:43.727 回答