10
我正在關注Elm指南,並且我正試圖爲時鐘示例實現暫停按鈕。在指南中寫道:取消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 ]
]
而不是取消訂閱,爲什麼不檢查模型是否暫停和noop(返回一個空的行動或任何需要)訂閱功能內? – pdoherty926
顯然是這樣,謝謝 –