アクション

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にする必要があります。

次に、あなたはActionからKeyboard.presses値をマップする機能が必要になります。更新されたコードは次のとおりです。

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