stian stian - 3 years ago 96
HTML Question

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

I am trying to learn some Elm, and have the classical app-pattern taken from a tutorial (below). I would like to create a view that has a head(er), body and a footer. I see that elm.Html contains a header (and footer) function, so I tried to add it in the view function (below). I believe I need to create my own node ("t") which has DOM elements (header and 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 =
{ init = init
, view = view
, update = update
, subscriptions = subscriptions

When I look at the DOM on the client side it has this structure;


so it seems that my view function returns content within body-tags. So how would I be able to create a view that would have this structure?

Answer Source

Elm.Html doesn't provide access to the root of the DOM (the HTML node). Instead you give it a node to act as it's root (commonly a DIV). So considering your example, you'd have to create the HTML, HEADER, BODY, and the top-level DIV nodes in your HTML file. Elm can then take it from there.

view model =
    text "test"

But it's common to do something like this:

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

Which would yield: <html><header></header><body><div><div>test</div></div></body><footer></footer></html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download