Come posso mescolare html e svg in una vista elm?

Question

Sto tentando di aggiungere un controllo per attivare e disattivare l'abbonamento nello elm time example. Il problema è che non riesco a far sì che html e svg coesistano nella vista.

Finora, ho questo per la vista:

import Html exposing (Html) 
import Html.App as Html 
import Html.Attributes exposing (..) 
import Html.Events exposing (..) 
import Svg exposing (..) 
import Svg.Attributes exposing (..) 
import Time exposing (Time, second) 

-- MODEL, UPDATE and SUBSCRIPTION removed for brevity 

-- VIEW 


view : Model -> Html Msg 
view model = 
    Html.div [] 
    [ Html.p [] [ text "hello world" ] 
    , clock 
    ] 

clock : Model -> Html msg 
clock model = 
    let 
    angle = 
     turns (Time.inMinutes model.time) 

    handX = 
     toString (50 + 40 * cos angle) 

    handY = 
     toString (50 + 40 * sin angle) 
    in 
    svg [ viewBox "0 0 100 100", Svg.Attributes.width "300px" ] 
     [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] [] 
     , line [ x1 "50", y1 "50", x2 handX, y2 handY, stroke "#023963" ] [] 
     ] 

Tuttavia, ricevo il seguente messaggio quando si tenta di transpile:

Detected errors in 1 module. 
==================================== ERRORS ==================================== 



-- TYPE MISMATCH ------------------------------------------ examples/6-clock.elm 

The 1st and 2nd elements are different types of values. 

70|  [ Html.p [] [ text "hello world" ] 
71|> , clock 
72|  ] 

The 1st element has this type: 

    VirtualDom.Node a 

But the 2nd is: 

    Model -> Html a 

Hint: All elements should be the same type of value so that we can iterate 
through the list without running into unexpected values. 

Oltre a risolvere l'errore, è lì un modo per risolvere il problema di non dover anteporre Html a tutti gli elementi html? per esempio. Html.div in contrasto con il solito div.

Answer 1

clock è una funzione che riceve un Model e restituisce alcuni Html.

Come dice il compilatore, è necessario disporre di un elemento Html all'interno di view. Dovrebbe essere sufficiente per passare il model alla funzione clock, come

view model = 
    Html.div [] 
    [ Html.p [] [ text "hello world" ] 
    , clock model 
    ] 

Per essere in grado di utilizzare direttamente div invece di Html.div è possibile importare la loro definizione utilizzando

import Html exposing (Html, div, p) 

e così via, oppure, se si desidera importare tutto il pacchetto Html

import Html exposing (..)