HTML-to-Fable/Elmish 工具的输出是否也适用于 Giraffe 的 ViewEngine？

Question

如果我将基于 HTML 的设计工具的输出粘贴到 Mangel Maxime 的（或 Maxime Mangel 的？）HTML-to-Fable/Elmish Convertor, will that output work if provided to Giraffe's ViewEngine（即 HTML DSL）？

从表面上看，这两种格式看起来非常相似，如果这能奏效那就太好了。

Answer 1

不，它不会工作 DSL 是不同的：例如这个 HTML 页面：

<!DOCTYPE html>
<html lang="en-EN">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://an_url/file.css">
    <link rel="shortcut icon" type="image/png" href="/favicon.png">
</head>
<body>
    <div id="elmish-app"></div>
    <script>var __INIT_STATE__ = "{\"SomeValueKey\":\"SomeValue\",\"AnotherValueKey\":\"AnotherValue\"}"</script><script src="http://localhost:8080/app.js"></script>
    <script src="http://localhost:8080/style.js"></script>
    <script src="http://localhost:8080/vendors~app.js"></script>
    <script src="http://localhost:8080/vendors~app~style.js"></script>
</body>
</html>

对应的 elmish 将是：

html [ Lang "en-EN" ] [ 
    head [] [ 
        meta [ CharSet "utf-8" ]
        link [ Rel "stylesheet"; Href "https://an_url/file.css" ]
        link [ Rel "shortcut icon"; Type "image/png"; Href "/favicon.png" ] ]
    body [] [ 
      div [ Id "elmish-app" ]
        [ ]
      script [ ] [ str "var __INIT_STATE__ = \"{\"SomeValueKey\":\"SomeValue\",\"AnotherValueKey\":\"AnotherValue\"}\"" ]
      script [ Src "http://localhost:8080/app.js" ] [ ]
      script [ Src "http://localhost:8080/style.js" ] [ ]
      script [ Src "http://localhost:8080/vendors~app.js" ] []
      script [ Src "http://localhost:8080/vendors~app~style.js"] [] 
    ] 
]

对应的 GiraffeViewEngine 将是：

html [ _lang lang] [
        head [] [
            meta [ _charset "utf-8"]
            meta [ _data "data-virtualpath" virtualPath ]
            link [ _rel "stylesheet"; _href (sprintf "%O" portfolioUrl) ]
            link [ _rel "shortcut icon"; _type "image/png"; _href "/favicon.png" ]
        ]
        body [] [
            div [_id "elmish-app"] []
            script [] [ rawText "var __INIT_STATE__ = \"{\"SomeValueKey\":\"SomeValue\",\"AnotherValueKey\":\"AnotherValue\"}\"" ]
            script [ _src (sprintf "%O%s" assetsBaseUrl "app.js") ] []
            script [ _src (sprintf "%O%s" assetsBaseUrl "style.js") ] []
            script [ _src (sprintf "%O%s" assetsBaseUrl "vendors~app.js") ] []
            script [ _src (sprintf "%O%s" assetsBaseUrl "vendors~app~style.js") ] []
        ]
    ]

仍然非常接近，您应该可以通过将 _ 添加到所有属性并将它们转换为小写来很快适应它。

HTML-to-Fable/Elmish 工具的输出是否也适用于 Giraffe 的 ViewEngine？

Will the output of the HTML-to-Fable/Elmish tool also work for Giraffe's ViewEngine?

fable-f#

elmish

f#-giraffe