我想知道Elm中元素的属性html,例如她的坐标.我正在尝试使用Json.Decode.
我是榆树的新人,这是出于学习目的.
这是一个简单的代码,我使用的是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
}
toastal.. 6
所以我不确定你要特别提到哪些补偿,但我认为这会让你走上正轨.首先,您需要调整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 -> a) -> Decoder a
coordsDecoder into =
Decode.field "target" <|
Decode.map2 into
(Decode.field "offsetWidth" Decode.int)
(Decode.field "offsetHeight" Decode.int)
最后,您需要on使用解码器对EventJavaScript单击事件返回的对象执行某些操作.该解码器获取的坐标,然后Decode.mapS中的Clicking味精类型.
Html.Events.on "click" (coordsDecoder Clicking)
有了它,Decode.field "target" ...你可以从目标元素开始解码你想要的任何东西.
从风格上讲,您将所有Html.*功能导入到范围中exposing (..),但您仍然在为所有非常冗余的内容添加前缀.你可以用style而不是Html.Attributes.style.不要害怕使用as- > Html.Attributes as Attr.
所以我不确定你要特别提到哪些补偿,但我认为这会让你走上正轨.首先,您需要调整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 -> a) -> Decoder a
coordsDecoder into =
Decode.field "target" <|
Decode.map2 into
(Decode.field "offsetWidth" Decode.int)
(Decode.field "offsetHeight" Decode.int)
最后,您需要on使用解码器对EventJavaScript单击事件返回的对象执行某些操作.该解码器获取的坐标,然后Decode.mapS中的Clicking味精类型.
Html.Events.on "click" (coordsDecoder Clicking)
有了它,Decode.field "target" ...你可以从目标元素开始解码你想要的任何东西.
从风格上讲,您将所有Html.*功能导入到范围中exposing (..),但您仍然在为所有非常冗余的内容添加前缀.你可以用style而不是Html.Attributes.style.不要害怕使用as- > Html.Attributes as Attr.
京公网安备 11010802040832号 | 京ICP备19059560号-6 