I would modify the model to also contain a name, description and price, at
the top level. These are uncommitted values. By uncommitted I mean that
it should be possible to change any one of these without changing the
others, and yet your master list of all the items will not change because
you have not clicked the Run button yet. This is because naturally it is
impossible to change all three items at once. You change one, and you need
somewhere to hold the value you have changed while you modify the next one,
but before you commit a group of three of them as one article into your
master list. It is only when you click Run that these three values are
copied into an Article and the article is appended to the List of articles
in your model. Hope that helps.
On Monday, October 10, 2016 at 7:54:13 AM UTC-4, Did wrote:
>
> Hi there,
>
> I'm pretty new to elm, so maybe this is a common issue.. I have a list of
> articles, each article is composed of an id, a name, a description and a
> price. I have also, in the UI, 3 fields in order to create a new article
> and add it to the list by clicking to the "click" button. All articles are
> listed in a table.
>
> But I really don't understand how to resolve this... Maybe by having an
> article object and "bind" its properties with a onInput event on their
> corresponding field, but even by doing that, I'm not sur how to implement
> the update function. For now, the update function returns the model because
> I don't know how to implement each cases...
>
> Thanks for your help!
>
> Here is the code :
>
> import Html exposing (..)
> import Html.App as App
> import Html.Events exposing (onClick, onInput)
> import Html.Attributes exposing (..)
>
> main =
> App.beginnerProgram {model = model, update = update, view = view}
>
> type alias Model = List Article
>
> type alias Article =
> {
> id: Int
> ,name: String
> ,description: String
> ,price: String
> }
>
> model: Model
> model = [{
> id = 1
> ,name = "Test 1"
> ,description = "Description..."
> ,price = "10.0"
> }]
>
>
> type Msg =
> Run | UpdateName String | UpdateDescription String | UpdatePrice String
>
>
> update: Msg -> Model -> Model
> update msg model =
> case msg of
> UpdateName newName -> model
> UpdateDescription newDesc -> model
> UpdatePrice newPrice -> model
> Run -> model
>
>
> view model =
> let th' field = th [] [text field]
> tr' article = tr [] [ td [][text article.name]
> ,td [][text article.description]
> ,td [][text article.price]
> ]
> in
> div []
> [input[type' "text", placeholder "Enter a name...", onInput UpdateName][]
> ,input[type' "text", placeholder "Enter a description...", onInput
> UpdateDescription][]
> ,input[type' "text", placeholder "Enter a price...", onInput
> UpdatePrice][]
> ,div[]
> [
> input[type' "button", value "click", onClick Run][]
> ]
> ,div[]
> [
> table [] [
> thead[][tr [](List.map th' ["name", "description", "price"])]
> ,tbody[](List.map tr' model)
> ]
> ]
> ]
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
