Question

我正在尝试Html.App.beginnerProgram，我想将事件处理程序（onKeyDown等）添加到<body>元素。

不幸的是，我放入view的所有内容都成为了<body>的孩子。从Html.body返回view并不能解决问题。这段代码：

main = beginnerProgram { model = 0, view = view, update = update }

view model = body [] []

update _ model = model

将生成：

<html>
    <head>...</head>
    <body>
        <body></body>
    </body>
</html>

那么，我如何控制<body>元素？

Answer 1

由于Elm呈现为<body/>的后代，因此您无法以正常的Elm方式将事件处理绑定到它（例如button [ onClick SomeMsg ] []）。相反，你必须使用端口。由于您使用的是端口和订阅，因此您需要使用Html.App.program而不是beginnerProgram。

您需要在端口模块中使用端口功能：

port bodyKeyPress : (String -> msg) -> Sub msg

然后您就可以通过javascript：

向该端口发送按键操作

app.ports.bodyKeyPress.send(...);

以下是一个完整的例子：

Main.elm

port module Main exposing (main)

import Html.App as App
import Html exposing (..)

main = App.program
  { init = init
  , update = update
  , view = view
  , subscriptions = subscriptions
  }

type alias Model = { message : String } 

type Msg = BodyKeyPress String

init = { message = "Press some keys: " } ! []

update msg model =
  case msg of
    BodyKeyPress c ->
      { model | message = model.message ++ c } ! []

view model = text model.message

subscriptions _ =
  bodyKeyPress BodyKeyPress

port bodyKeyPress : (String -> msg) -> Sub msg

幕后的html（假设你使用elm make Main.elm --output=Main.js构建）：

<html>
  <body>
    <script src="Main.js"></script>
    <script>
      var app = Elm.Main.fullscreen();

      document.body.onkeypress = function(e) {
        app.ports.bodyKeyPress.send(String.fromCharCode(e.keyCode));
      };
    </script>
  </body>
</html>

您需要为要发送的每个身体事件创建和处理端口功能。

如何在Elm中的body元素中添加事件处理程序？

1 个答案:

Main.elm