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并返回一些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 (..)

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

1 个答案: