如何在榆樹視圖中混合使用html和svg？

Question

我試圖添加一個控件來打開和關閉訂閱elm time example。問題是我無法讓html和svg在視圖中共存。

到目前爲止，我有這樣一種觀點：

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

不過，我得到以下消息時，我嘗試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. 

除了固定的錯誤，有沒有一種解決不必將Html添加到所有html元素的問題的方法？例如Html.div，而不是通常的div。

Answer 1

clock是一個函數，它接收Model並返回一些Html。

正如編譯器告訴你的，你需要在你的view中有一個Html元素。它應該是足以通過model到clock功能，如

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

爲了能夠使用直接div代替Html.div你可以導入使用

import Html exposing (Html, div, p) 

等他們的定義，或者，如果要導入全部Html包

import Html exposing (..)