在 Elm 中取消订阅
Cancel subscriptions in Elm
我正在按照 Elm 指南进行操作,现在正尝试为时钟示例实现一个暂停按钮。在指南中写道:
Add a button to pause the clock, turning the Time subscription off.
我所做的只是向模型添加一个 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 ]
]
我想你可以简单地 return Sub.none
代替
您的 subscription
功能暂停时。
如果你选择这样做,那么你可以恢复
Tick
您的 update
函数中的处理程序。
subscriptions : Model -> Sub Msg
subscriptions model =
if model.paused
then Sub.none
else Time.every second Tick
我正在按照 Elm 指南进行操作,现在正尝试为时钟示例实现一个暂停按钮。在指南中写道:
Add a button to pause the clock, turning the Time subscription off.
我所做的只是向模型添加一个 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 ]
]
我想你可以简单地 return Sub.none
代替
您的 subscription
功能暂停时。
如果你选择这样做,那么你可以恢复
Tick
您的 update
函数中的处理程序。
subscriptions : Model -> Sub Msg
subscriptions model =
if model.paused
then Sub.none
else Time.every second Tick