如何在榆树视图中混合使用html和svg？

Question

我正在尝试添加一个控件来在elm time示例中打开和关闭订阅.问题是我无法让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" ] []
      ]

但是,当我尝试转换时,我收到以下消息:

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是一个接收a Model并返回一些的函数Html.

正如编译器告诉你的那样,你需要Html在你的内部有一个元素view.它应该足以传递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 (..)