如何在榆树视图中混合使用 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" ] []
      ]

但是，当我尝试转译时收到以下消息：

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 和 returns 一些 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 (..)

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

How can I mix html and svg in an elm view?

elm