По пятам мой предыдущий вопрос пример, над которым я работаю в «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, но я просто нигде не могу найти. Различается ли подход к выполнению одного и того же в двух средах?