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"

しかし、エルミッシュでは、私が見つけることができる同等のものはありませんon。私は思いついた:

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

適用できると考えられるすべてのソースを調べましたが、カスタム イベントをリッスンする方法が見つかりません。また、ドキュメントには、私が見つけたこれを行う方法の例や説明はありません。

Elmish でカスタム イベントに接続する方法が必要ですが、どこにも見つかりません。同じことを行うためのアプローチは、2 つの環境で異なりますか?

4

1 に答える 1