Question

如果我想使用elm（0.18）中的按钮触发更新SomeAction，我会这样做：

myView : Html Msg
myView =
    div []
        [ button [ onClick SomeAction ] [ text "Some Action" ]
        ]

我想在myView渲染时触发SomeAction。我该怎么做：

myView : Html Msg
myView =
    div [ onLoad SomeAction ]
        []

Answer 1

如评论所述，如果您的呈现myView基于条件，则可以将其用于模型并在其应该显示时执行某些操作。

伪代码的迷你样本：

import Html exposing (beginnerProgram, div, button, text)
import Html.Events exposing (onClick)
import Debug


main =
  Html.program
    { init = (init, Cmd.none)
    , view = view
    , update = update
    , subscriptions = subscriptions
    }


subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none


type alias Model =
  { value: Int
  , show: Bool
  }


init : Model 
init = 
  Model 0 False


viewButton model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]


view model =
  div []
    [ button [ onClick ShowMe ] [ text <| if model.show then "Hide" else "Show" ]
    , if model.show then viewButton model else text ""
    ]


type Msg 
  = NoOp
  | Increment 
  | Decrement
  | ShowMe


update : Msg -> Model -> (Model, Cmd msg)
update msg model =
  case msg of
    NoOp -> (model, Cmd.none)

    Increment ->
      ({ model | value = model.value + 1 }, Cmd.none)

    Decrement ->
      ({ model | value = model.value - 1 }, Cmd.none)

    ShowMe ->
      -- leverage Cmd msg to do some action
      ({ model | show = not model.show }, someAction model.show)


someAction : Bool -> Cmd msg
someAction showing =
    -- or do some other things here
    let _ = Debug.log "show before click" showing
    in Cmd.none

Answer 2

这很脏，但它有效...做一个几乎什么都不做的动画，然后听“animationend”和“webkitanimationend”。

          Html.div
                [ Html.style [ ( "display", "inline-block" ), ( "animation", "pulse 0.1s" ) ]
                , Html.Events.on "webkitAnimationEnd" 
                   (Json.Decode.succeed (FancyMessageHere)
                ]
                []

CSS中也有一个虚拟脉冲：

@keyframes pulse {
    0%   {background-color: white;}
    100% {background-color: white;}
}

页面加载时触发消息（榆木0.18）

2 个答案: