elmビューでhtmlとsvgをどのように組み合わせることができますか？

Question

elm time exampleのサブスクリプションをオン/オフにするコントロールを追加しようとしています。問題は、htmlとsvgをビューに共存させることができないことです。

はこれまでのところ、私はビューのためにこれを持っている：私はtranspileしようとすると、

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

しかし、私は次のようなメッセージが出ます：

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. 

エラーを修正することに加えて、そこにありますすべてのhtml要素にHtmlを追加する必要がないという問題を解決する方法はありますか？例えば通常のdivとは対照的に、Html.divである。

Answer 1

clockは、Modelを受け取り、Htmlを返す関数です。

コンパイラからは、viewの中にHtmlという要素が必要です。それはあなたがそうで

import Html exposing (Html, div, p) 

とを使用してその定義をインポートすることができ、直接div代わりHtml.divの使用できるようにするには

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

のように、clock機能へmodelを通過するのに十分であるべき、または、 Htmlパッケージをすべてインポートする場合は

import Html exposing (..)