gpt4 book ai didi

fable-f# - 在 Fable-Elmish 中处理自定义事件

转载 作者:行者123 更新时间:2023-12-04 10:03:47 25 4
gpt4 key购买 nike

紧随my previous question我在“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 中必须有一种方法可以连接到自定义事件,但我在任何地方都找不到它。在两种环境中做同一件事的方法是否不同?

最佳答案

因此,为了回答我自己的问题,在这种情况下,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 中需要的方法。

关于fable-f# - 在 Fable-Elmish 中处理自定义事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61692208/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com