Jak mogę połączyć html i svg w widoku wiązu?

Question

Próbuję dodać kontrolkę, aby włączyć i wyłączyć subskrypcję w elm time example. Problem polega na tym, że nie mogę uzyskać html i svg, aby współistnieć w widoku.

tej pory mam to za widok:

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" ] [] 
     ] 

jednak, pojawia się następujący komunikat przy próbie 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. 

Oprócz naprawienia błędu, jest tam sposób na rozwiązanie problemu polegającego na tym, że nie trzeba dodawać do wszystkich elementów html Html? na przykład Html.div w przeciwieństwie do zwykłego div.

Answer 1

clock to funkcja, która odbiera Model i zwraca około Html.

Jak mówi kompilator, musisz mieć element Html w swoim view. Powinien on być wystarczający, aby zdać model do funkcji clock, jak

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

Aby móc korzystać bezpośrednio div zamiast Html.div można importować ich definicji korzystając

import Html exposing (Html, div, p) 

i tak dalej, albo jeśli chcesz zaimportować wszystkie pakiety Html

import Html exposing (..)