Events 触发事件时获取ID属性(elm v0.19.1)

Events 触发事件时获取ID属性(elm v0.19.1),events,event-handling,elm,Events,Event Handling,Elm,我有两个具有contenteditable属性的div html元素,并且我希望在触发模糊事件时获得元素的de id属性 这是我当前的代码,它不工作,我添加了任何注释: module Mytest exposing (main) import Browser import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (..) import Json.Decode as J

我有两个具有contenteditable属性的div html元素,并且我希望在触发模糊事件时获得元素的de id属性

这是我当前的代码,它不工作,我添加了任何注释:

module Mytest exposing (main)

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Json.Decode as Json
import Debug

type alias Model =
    { div1 : String
    , div2 : String
    }

initialModel : Model
initialModel =
    { div1 = "test1"
    , div2 = "test2"
    }

init : () -> ( Model, Cmd Msg )
init () =
    ( initialModel, Cmd.none )

view : Model -> Html Msg
view model =
    div []
        [ div [ id "div1", contenteditable True, onKeyPress KeyPressed ] [ text model.div1 ]
        , div [ id "div2", contenteditable True, onKeyPress KeyPressed ] [ text model.div2 ]
        ]

type Msg
    = KeyPressed Int

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        KeyPressed code ->
            let
                -- is there any way to use Debug.log without let block?
                a = Debug.log "div1 event" code
            in
                -- keypressed on div1 should be update div1 field model
                -- the same to div2
                ({model | div1 = String.fromInt code}, Cmd.none)

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

main : Program () Model Msg
main =
    Browser.element
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }

onKeyPress : (Int -> msg) -> Attribute msg
onKeyPress tagger =
  on "keypress" (Json.map tagger keyCode)
编辑:

以下示例不会触发div contenteditable中的事件:


但是,在javascript中它是有效的:

除非示例中没有明显的其他约束,否则您只需向KeyPressed添加一个额外的参数,并通过该参数传递id即可:

输入味精 =按键字符串Int 查看:模型->Html消息 视图模型= 分区[] [div[id div1,contenteditable True,onKeyPress按div1][text model.div1] ,div[id div2,contenteditable True,onKeyPress按div2][text model.div2] ] 更新:Msg->Model->Model,Cmd Msg 更新msg模型= 味精案例 按键识别码-> -现在你有身份证了 然而,您可能不应该首先依赖字符串ID,因为字符串类型的数据非常容易出错。理想情况下,每个组件都有单独的Msg变体:

type Msg
    = Div1KeyPressed Int
    | Div2KeyPressed Int
或者,如果您需要更多的活力,可以使用自定义Id类型:

类型Id =Div1 |第二组 输入味精 =按键Id Int 查看:模型->Html消息 视图模型= 分区[] [div[contenteditable True,onKeyPress按Div1][text model.Div1] ,div[contenteditable True,onKeyPress键按Div2][text model.Div2] ] 更新:Msg->Model->Model,Cmd Msg 更新msg模型= 味精案例 按键Div1代码-> -更新model.div1 按键Div2代码-> -更新model.div2
非常感谢。如果没有更好的解决方案,我想我可以使用第一个解决方案。您知道不使用let-in块而使用Debug.log是否可行吗?您通常会使用它来代替您正在记录的值,因为它返回给定的值。例如,您可以在使用代码的任何地方使用Debug日志DIV1事件代码。您认为什么更好的解决方案?我真的需要在按下键时编写DIV CopeNeTeNeD更新模型。
type Msg
    = Div1KeyPressed Int
    | Div2KeyPressed Int