如何將onClick事件中的值映射到Elm中的操作？

Question

我正在試驗一個Elm應用程序，我希望通過點擊div來產生動作，但我希望這些動作包含點擊的座標。

我可以看到，我可以生成這樣的點擊動作：

div [onClick address MyAction] [text "click in here"] 

但我不能看到如何應用映射函數的原始點擊數據來填充字段MyAction

Answer 1

您可以使用Json解碼器從JavaScript事件對象中拉出不同的屬性。爲了得到clientX和clientY值作爲一個元組，你可以創建以下解碼器：

import Json.Decode as Json exposing ((:=)) 

eventPos : Json.Decoder (Int, Int) 
eventPos = 
    Json.object2 
    (,) 
    ("clientX" := Json.int) 
    ("clientY" := Json.int) 

爲了做到這些價值觀的東西，你需要補充的是可以接受的元組作爲參數的操作：

type Action 
    = MyAction 
    | DivClicked (Int, Int) 

最後，而不是使用onClick函數生成你的DIV的事件處理程序的屬性，你需要使用on功能，傳遞您的JSON解碼器：

on "click" eventPos (Signal.message address << DivClicked) 

這裏有一個包含working example的要點，您可以直接粘貼到http://elm-lang.org/try。