Elm:属性 "onerror"改为添加 "data-onerror"属性

Question

在Elm中，我有一个简单的图像，我希望将其替换为一些“缺少”的onerror图像。因此，我添加了一个“onerror”属性:

img
    [ src "broken-link.png"
    , attribute "onerror" "this.onerror=null;this.src='missing.png';"
    ] []

但是，当我查看生成的html时，img并没有获得 onerror属性，而是获得了 data-onerror，当然这是行不通的。

为什么是这样？以及我该如何解决？

这是我和 friend Bulbasaur一起制作的一个小例子，用以说明问题: https://ellie-app.com/3Yn8Y6Rmvrqa1

Answer 1

为什么是这样？

这似乎是Elm内置的未记录安全功能。

检查Elm的源代码，Html.attribute定义为(source)

attribute : String -> String -> Attribute msg
attribute =
    VirtualDom.attribute

并将 VirtualDom.attribute定义为( source):

attribute : String -> String -> Attribute msg
attribute key value =
    Elm.Kernel.VirtualDom.attribute
        (Elm.Kernel.VirtualDom.noOnOrFormAction key)
        (Elm.Kernel.VirtualDom.noJavaScriptOrHtmlUri value)

您的属性名称 onclick被传递给 Elm.Kernel.VirtualDom.noOnOrFormAction，该代码在JavaScript中定义为( source):

function _VirtualDom_noOnOrFormAction(key)
{
    return /^(on|formAction$)/i.test(key) ? 'data-' + key : key;
}

因此，如果属性名称以 on开头或为字符串 formAction，则将其重命名为数据属性。

我如何解决它？

我知道如何解决此问题的一种方法是在没有JavaScript的情况下用Elm编写代码。这是 full working example，其主要部分复制如下:(这是基于关于检测图像加载失败的公认答案 here的。)

1)在模型中保留当前URL

type alias Model =
    { src : String
    }

init : Model
init =
    { src = "http://example.com" }

2)更改事件处理程序以在图像加载错误时发送Elm消息

img
    [ src model.src
    , on "error" (Json.Decode.succeed ImageError)
    , alt "Should be Bulbasaur"
    ] []

3)错误时更改 update中的URL

update : Msg -> Model -> Model
update msg model =
    case msg of
        ImageError ->
            { model
                | src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"
            }