Last active
June 16, 2016 11:54
-
-
Save chrisbuttery/cc4366ecbb8be293a3843a1883d1e176 to your computer and use it in GitHub Desktop.
Elm 0.17: Experimenting with patterns to update a model
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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") | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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") | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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") | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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") | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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