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的单击以获得坐标的元组。

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) -> Decoder a
coordsDecoder into =
    Decode.field "target" <| 
        Decode.map2 into
            (Decode.field "offsetWidth" Decode.int)
            (Decode.field "offsetHeight" Decode.int)

最后，您需要on让解码器对JavaScript Click事件返回的Event对象执行某些操作。此解码器获取坐标，然后Decode.map为Clicking msg类型。

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

使用Decode.field "target" ...，您可以从目标元素开始解码任何内容。

在风格上，您将所有Html.*函数导入到exposing (..)的范围内，但您仍然在为所有非常多余的内容添加前缀。您可以使用style代替Html.Attributes.style。不要害怕使用as - ＆gt; Html.Attributes as Attr。

Answer 2

优秀的答案，如果我尝试获取与浏览器相关的坐标，以防样式左侧和顶部不是definity。我正在寻找一些解决方案并找到了这个

    class Solution(object):
        def inorderTraversal(self, root):
            res = []
            if root:
                self.inorderTraversal(root.left)
                res.append(root.val)
                self.inorderTraversal(root.right)
            return res

我想知道Elm

2 个答案: