を試してい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>要素を制御できますか？
Elmはの子孫としてレンダリングされるため<body/>、通常のElmの方法（例button [ onClick SomeMsg ] []）でイベント処理をバインドすることはできません。代わりに、ポートを使用する必要があります。また、ポートとサブスクリプションを使用しているため、Html.App.programではなくを使用する必要がありますbeginnerProgram。
ポートモジュール内にポート関数が必要です。
port bodyKeyPress : (String -> msg) -> Sub msg
そして、javascriptからそのポートにキー押下を送信できるようになります。
app.ports.bodyKeyPress.send(...);
完全な例を次に示します。
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>
送信するすべてのボディイベントのポート関数を作成して処理する必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加