首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在Fable-Elmish中处理自定义事件

在Fable-Elmish中处理自定义事件
EN

Stack Overflow用户
提问于 2020-05-09 13:24:40
回答 1查看 255关注 0票数 2

紧随my previous question之后,我在"Elm in Action“中的示例(并试图移植到寓言-Elmish)有一个来自自定义元素的自定义事件。在html文件中,我有以下内容:

代码语言:javascript
复制
<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中),接收事件的第一步是执行类似以下操作:

代码语言:javascript
复制
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

它可以简化为:

代码语言:javascript
复制
onSlide : (Int -> msg) -> Attribute msg
onSlide toMsg =
  at [ "detail", "userSlidTo" ] int
    |> Json.Decode.map toMsg
    |> on "slide"

然而,在Elmish中,我找不到与on相同的语言。我想出了:

代码语言:javascript
复制
let onSlide (toMsg: int -> Msg) =
  Decode.at ["detail", userSlidTo"] Decode.int
  |> Decode.map toMsg
  |> ... // Now what!?

我已经查看了所有我能想到的可能适用的源代码,但找不到一种监听自定义事件的方法。再说一次,文档没有提供我找到的任何示例或解释如何做到这一点。

必须有一种方法来连接Elmish中的自定义事件,但我在任何地方都找不到它。在两个环境中做同样的事情的方法是不同的吗?

EN

回答 1

Stack Overflow用户

发布于 2020-05-15 06:20:44

所以,为了回答我自己的问题,似乎Elmish的工作方式和Elm在这种情况下不一样。这个机制看起来像是在Elmish中建立一个订阅,类似于:

代码语言:javascript
复制
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所需要的方法。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61692208

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档