Обработка пользовательских событий в Fable-Elmish - PullRequest
0 голосов
/ 09 мая 2020

По пятам мой предыдущий вопрос пример, над которым я работаю в «Elm in Action» (и пытаюсь портировать на Fable-Elmi sh), имеет настраиваемое событие из настраиваемого элемента . В файле 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"

Однако в Elmi sh нет эквивалента, который я могу найти для on. Я придумал:

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

Я просмотрел источники во всем, что я мог придумать, что могло бы применяться, но не могу найти способ прослушивать пользовательские события. И, опять же, документация не предоставляет никаких примеров или объяснений того, как это сделать, которые я нашел.

Должен быть способ подключиться к настраиваемым событиям в Elmi sh, но я просто нигде не могу найти. Различается ли подход к выполнению одного и того же в двух средах?

1 Ответ

0 голосов
/ 15 мая 2020

Итак, отвечая на мой собственный вопрос, похоже, что Elmi sh работает не так, как Elm в этом случае. Механизм может заключаться в создании подписки в Elmi sh что-то вроде:

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

Я еще не заставил это работать, так как есть другие проблемы, которые еще предстоит решить но, похоже, именно такой подход необходим в Elmi sh.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...