如何 link 键盘按下动作

Question

我正在掌握 Elm 的窍门，但我一直在努力处理信号和键盘按键。下面的代码是 start-app 包的示例。我希望当我按下空格键时计数器增加。下面的例子是如何做到的？

import Html exposing (div, button, text)
import Html.Events exposing (onClick)
import StartApp.Simple as StartApp


main =
  StartApp.start { model = model, view = view, update = update }


model = 0


view address model =
  div []
    [ button [ onClick address Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]


type Action = Increment | Decrement


update action model =
  case action of
    Increment -> model + 1
    Decrement -> model - 1

Answer 1

您需要使用常规 StartApp 而不是 StartApp.Simple，因为它提供了使用效果和任务的方法。

Action 需要一个 NoOp 构造函数来让我们的视图在按键不是空格键时保持不变。

然后您将需要一个将 Keyboard.presses 值映射到 Action 的函数。这是更新后的代码：

import Html exposing (div, button, text)
import Html.Events exposing (onClick)
import StartApp
import Effects exposing (Never)
import Task 
import Keyboard
import Char

app =
  StartApp.start
    { init = init
    , view = view
    , update = update
    , inputs = [ Signal.map spaceToInc Keyboard.presses ]
    }

main =
  app.html

type alias Model = Int

init =
  (0, Effects.none)

view address model =
  div []
    [ button [ onClick address Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]

type Action
  = Increment
  | Decrement
  | NoOp

update action model =
  case action of
    NoOp -> (model, Effects.none)
    Increment -> (model + 1, Effects.none)
    Decrement -> (model - 1, Effects.none)

spaceToInc : Int -> Action
spaceToInc keyCode =
  case (Char.fromCode keyCode) of
    ' ' -> Increment
    _ -> NoOp

port tasks : Signal (Task.Task Never ())
port tasks =
  app.tasks

如何 link 键盘按下动作

How to link keyboard press to action

keyboard

elm