2016-08-01 199 views
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 ] 
      ] 
+0

而不是取消訂閱,爲什麼不檢查模型是否暫停和noop(返回一個空的行動或任何需要)訂閱功能內? – pdoherty926

+0

顯然是這樣,謝謝 –

回答

23

我想你可以簡單地在 您subscription函數返回Sub.none,而不是當它被暫停。

如果您選擇這樣做,那麼您可以在update函數中恢復 Tick處理函數。

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

我完全跳過了訂閱模型參數!謝謝 –