时间戳

首页 > 解决方案 > HTML-to-Fable/Elmish 工具的输出是否也适用于 Giraffe 的 ViewEngine？

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

问题描述

如果我将基于 HTML 的设计工具的输出粘贴到 Mangel Maxime（或 Maxime Mangel 的？）HTML-to-Fable/Elmish 转换器中，如果提供给Giraffe 的 ViewEngine（即 HTML DSL），该输出是否有效？

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

标签： fable-f#elmishf#-giraffe

解决方案

不，它不会工作 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") ] []
        ]
    ]

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

推荐阅读