如何使用 Elm.Html 创建特定的 DOM 结构？

Question

人，我正在尝试学习一些 Elm，并从教程（下面）中获取经典的 app-pattern。我想创建一个具有页眉（呃）、body 和页脚的视图。我看到 elm.Html 包含一个 header （和页脚）函数，所以我尝试将它添加到视图函数中（如下）。我相信我需要创建自己的节点 ("t")，它具有 DOM 个元素（header 和 div）。

module App exposing (..)

import Html exposing (Html, node, header, div, text, program)

type Msg = NoOp

init =
    ("Hello", Cmd.none)


view model =
    node "t" [][header[][], div [][text "test"]]

update msg model =
    case msg of
        NoOp -> (model, Cmd.none)

subscriptions model = Sub.none

main =
    program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

当我在客户端查看 DOM 时，它具有以下结构；

<html><head></head><body><t><header></header><div>test</div></t></body></html>

所以我的视图函数 returns 内容似乎在 body-tags 内。那么我怎样才能创建一个具有这种结构的视图呢？ <html><header></header><body><div>test</div></body><footer></footer></html>

Answer 1

Elm.Html 不提供对 DOM（HTML 节点）的根的访问。相反，你给它一个节点作为它的根（通常是 DIV）。因此，考虑到您的示例，您必须在 HTML 文件中创建 HTML、HEADER、BODY 和顶级 DIV 节点。然后 Elm 可以从那里拿走它。

view model =
    text "test"

但是这样的事情很常见：

view model =
    div [] [ text "test" ]

这会产生：<html><header></header><body><div><div>test</div></div></body><footer></footer></html>

如何使用 Elm.Html 创建特定的 DOM 结构？

How to create a specific DOM structure with Elm.Html?

html

elm