Events 触发事件时获取ID属性(elm v0.19.1)
我有两个具有contenteditable属性的div html元素,并且我希望在触发模糊事件时获得元素的de id属性 这是我当前的代码,它不工作,我添加了任何注释: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
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