Question

人，我正在尝试学习一些榆树，并从教程（下面）中获取经典的应用程序模式。我想创建一个具有头部（呃），正文和页脚的视图。我看到elm.Html包含一个页眉（和页脚）函数，所以我尝试在视图函数中添加它（如下）。我相信我需要创建自己的节点（“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>

因此我的view函数似乎返回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节点。榆树可以从那里拿走它。

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结构？

1 个答案: