如何將鍵盤按鍵與動作聯繫起來

Question

我得到了榆樹的烙印，但我一直在努力使用信號和鍵盤按鍵。下面的代碼是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