Question

我正在关注Elm指南，我正在尝试为时钟示例实现暂停按钮。在指南中写道：

添加按钮以暂停时钟，关闭时间订阅。

我所做的就是在模型中添加paused属性，并在更新功能中使用它。我该如何取消订阅？

module Main exposing (..)

import Html exposing (Html)
import Html.App as App
import Html.Events exposing (onClick)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Time exposing (Time, second)


main =
    App.program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }


type alias Model =
    { time : Time
    , paused : Bool
    }


init : ( Model, Cmd Msg )
init =
    ( Model 0 False, Cmd.none )


type Msg
    = Tick Time
    | Toggle


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Tick newTime ->
            if not model.paused then
                ( Model newTime False, Cmd.none )
            else
                ( model, Cmd.none )

        Toggle ->
            ( Model model.time (not model.paused), Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Time.every second Tick


clock : Time -> Html Msg
clock time =
    let
        sAngle =
            turns (Time.inMinutes time)

        sHandX =
            toString (50 + 40 * cos sAngle)

        sHandY =
            toString (50 + 40 * sin sAngle)
    in
        svg [ viewBox "0 0 100 100", width "300px" ]
            [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] []
            , line [ x1 "50", y1 "50", x2 sHandX, y2 sHandY, stroke "#023963" ] []
            ]


view : Model -> Html Msg
view model =
    let
        btnText =
            if model.paused then
                "Start"
            else
                "Pause"
    in
        Html.div []
            [ clock model.time
           , Html.button [ onClick Toggle ] [ Html.text btnText ]
           ]

Answer 1

我猜您只需返回Sub.none即可暂停时的subscription功能。

如果您选择这样做，那么您可以还原 Tick函数中的update处理程序。

subscriptions : Model -> Sub Msg
subscriptions model =
    if model.paused
    then Sub.none
    else Time.every second Tick

取消订阅Elm

1 个答案: