Wie kann ich HTML und Svg in einer Ulmenansicht mischen?

Question

Ich versuche ein Steuerelement hinzuzufügen, um das Abonnement in elm time example ein- und auszuschalten. Das Problem ist, dass ich nicht HTML und Svg koexistieren in der Ansicht erhalten kann.

Bisher habe ich dies für die Ansicht:

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

Allerdings bekomme ich folgende Meldung, wenn ich zu transpile versuchen:

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. 

Neben den Fehler Fixierung gibt es eine Möglichkeit, das Problem zu beheben, dass man nicht allen HTML-Elementen Html voranstellen muss? z.B. Html.div im Gegensatz zu den üblichen div.

Answer 1

clock ist eine Funktion, die eine empfängt und einige Html zurückgibt.

Wie der Compiler Ihnen sagt, müssen Sie ein Html Element in Ihrem view haben. Es soll die model an die clock Funktion zu übergeben, wie

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

Um direkt zu verwenden div statt Html.div genug sein, Sie ihre Definition importieren könnten

import Html exposing (Html, div, p) 

mit und so weiter, oder, Wenn Sie alle Html Paket

import Html exposing (..) 

importieren möchten