html - 我想知道 Elm 中元素的属性 html

Question

我想知道 Elm 中某个元素的属性 html，例如她的坐标。我正在尝试使用 Json.Decode。

我是 Elm 的新手，这是为了学习目的。

这是一个简单的代码，我使用的是 Elm 0.18:

module Stamps exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)


type alias Model =
    {}


type Msg
    = NoOp
    | Clicking


model : Model
model =
    {}


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )

        Clicking ->
            let
                _ =
                    Debug.log "msg1" model
            in
                ( model, Cmd.none )


view : Model -> Html Msg
view model =
    div
        [ Html.Attributes.style
            [ ( "backgroundColor", "blue" )
            , ( "height", "300px" )
            , ( "width", "300px" )
            , ( "position", "relative" )
            , ( "left", "100px" )
            , ( "top", "50px" )
            ]
        , Html.Attributes.class
            "parent"
        ]
        [ div
            [ Html.Attributes.style
                [ ( "background-color", "#3C8D2F" )
                , ( "cursor", "move" )
                , ( "width", "100px" )
                , ( "height", "100px" )
                , ( "border-radius", "4px" )
                , ( "position", "absolute" )
                , ( "color", "white" )
                , ( "display", "flex" )
                , ( "align-items", "center" )
                , ( "justify-content", "center" )
                ]
            , Html.Attributes.class
                "children"
            , Html.Events.onClick Clicking
            ]
            []
        ]


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none


main : Program Never Model Msg
main =
    Html.program
        { init = ( model, Cmd.none )
        , update = update
        , view = view
        , subscriptions = subscriptions
        }

Answer 1

所以我不太确定您要具体尝试获得哪些补偿，但我认为这会让您走上正轨。首先，您需要调整 Msg ADT 的 Clicking 以获得坐标元组。

type Msg
    = NoOp
    | Clicking Int Int

假设您暂时只想记录坐标，您可以使用它。请记住，如果需要，您可以在模式匹配中解构。

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )

        Clicking x y ->
            let
                _ =
                    Debug.log "coords" ( x, y )
            in
                ( model, Cmd.none )

你需要一个 Json.Decode.Decoder 到那个元组。

import Json.Decode as Decode exposing (Decoder)


coordsDecoder : (Int -> Int -> a) -> Decoder a
coordsDecoder into =
    Decode.field "target" <| 
        Decode.map2 into
            (Decode.field "offsetWidth" Decode.int)
            (Decode.field "offsetHeight" Decode.int)

最后，您需要 on 来让解码器对 JavaScript 点击事件返回的 Event 对象做一些事情。此解码器获取坐标，然后 Decode.map 是 Clicking 消息类型。

Html.Events.on "click" (coordsDecoder Clicking)

有了 Decode.field "target"...，您可以从目标元素开始解码任何您想要的内容。

---

从风格上讲，您正在将所有 Html.* 函数导入到具有 exposing (..) 的范围内，但是您仍然在为所有内容添加前缀，这是非常多余的.您可以只使用 style 而不是 Html.Attributes.style。不要害怕使用 as -> Html.Attributes as Attr。