Skip to content

Instantly share code, notes, and snippets.

@chrisbuttery
Last active Jun 16, 2016
Embed
What would you like to do?
Elm 0.17: Experimenting with patterns to update a model
import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import String
type alias Model =
{ topic : String }
init =
({ topic = "" }, Cmd.none)
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = \_ -> Sub.none
}
-- UPDATE
type Msg = NewContent String
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NewContent val ->
({ model | topic = val }, Cmd.none) -- Handles the 1 property on the model fine
-- VIEW
view model =
div []
[ input [ placeholder "Text to reverse", onInput NewContent, myStyle ] []
, div [ myStyle ] [ text (String.reverse model.topic) ]
]
myStyle =
style
[ ("width", "100%")
, ("height", "40px")
, ("padding", "10px 0")
, ("font-size", "2em")
, ("text-align", "center")
]
import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import String
type alias Model =
{ topic : String }
init =
({ topic = "" }, Cmd.none)
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = \_ -> Sub.none
}
-- UPDATE
type Msg = NewContent String
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NewContent val ->
(Model val, Cmd.none) -- Handles the 1 property on the model fine
-- VIEW
view model =
div []
[ input [ placeholder "Text to reverse", onInput NewContent, myStyle ] []
, div [ myStyle ] [ text (String.reverse model.topic) ]
]
myStyle =
style
[ ("width", "100%")
, ("height", "40px")
, ("padding", "10px 0")
, ("font-size", "2em")
, ("text-align", "center")
]
import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import String
type alias Model =
{ topic : String
, id : Int -- adding another property to the model!!!!
}
init =
({ topic = ""
, id = 1
}, Cmd.none)
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = \_ -> Sub.none
}
-- UPDATE
type Msg = NewContent String
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NewContent val ->
({ model | topic = val }, Cmd.none) -- Still updates, even thought the model has 2 properties
-- VIEW
view model =
div []
[ input [ placeholder "Text to reverse", onInput NewContent, myStyle ] []
, div [ myStyle ] [ text (String.reverse model.topic) ]
]
myStyle =
style
[ ("width", "100%")
, ("height", "40px")
, ("padding", "10px 0")
, ("font-size", "2em")
, ("text-align", "center")
]
import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import String
type alias Model =
{ topic : String
, id : Int -- adding another property to the model!!!!
}
init =
({ topic = ""
, id = 1
}, Cmd.none)
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = \_ -> Sub.none
}
-- UPDATE
type Msg = NewContent String
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NewContent val ->
(Model val, Cmd.none) -- CHOKES!!!
-- VIEW
view model =
div []
[ input [ placeholder "Text to reverse", onInput NewContent, myStyle ] []
, div [ myStyle ] [ text (String.reverse model.topic) ]
]
myStyle =
style
[ ("width", "100%")
, ("height", "40px")
, ("padding", "10px 0")
, ("font-size", "2em")
, ("text-align", "center")
]
import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import String
type alias Model =
{ topic : String
, id : Int -- adding another property to the model!!!!
}
init =
({ topic = ""
, id = 1
}, Cmd.none)
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = \_ -> Sub.none
}
-- UPDATE
type Msg = NewContent String
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NewContent val ->
(Model val 100, Cmd.none)
-- Works !!
-- Model as used in your update examples is a constructor,
-- so for a Model with two fields, you can pass it two fields.
-- VIEW
view model =
div []
[ input [ placeholder "Text to reverse", onInput NewContent, myStyle ] []
, div [ myStyle ] [ text (String.reverse model.topic) ]
]
myStyle =
style
[ ("width", "100%")
, ("height", "40px")
, ("padding", "10px 0")
, ("font-size", "2em")
, ("text-align", "center")
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment