[elm-discuss] Re: How to insert an object into a list from a form
Op dinsdag 11 oktober 2016 09:45:57 UTC+2 schreef Did: > > Thanks for your reply! Is there a better way to do this or this is a > common solution in elm? > Well, this is the best way I can think of :) But seriously, as soon as your app grows, some functions in this setup may become big and bloated, with lots of unnecessarily repeated code. Then (and only then) you may want to separate out some functions to separate files. That would very much depend on the direction in which your app will grow first, e.g.: - If your article gets 20 fields instead of , you could put all fields in a Dict, and have a generic update function that takes a key, and updates the field in the Dict. - If you get extensive validation on fields, you may have separate validation on fields before updating model. - If your ID will be provided by a server, rather than your client, that bit of code may change. - If IDs are generated in the client in lots of other places, you could have a separate ID generator helper. - If you want to allow editing of an existing single line, you will need to need a modify (instead of add) function - If you want to allow editing multiple lines at once, .. - Etcetera -- 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 elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: How to insert an object into a list from a form
Op maandag 10 oktober 2016 14:58:56 UTC+2 schreef Ambrose Laing:
>
> 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.
>
So your model would then look something like this:
type alias Model =
{ articles : List Article
, newName : String
, newDescription : String
, newPrice : String
}
Your update would then include something like:
case msg of
UpdateName inputString ->
{ model | newName = inputString }
UpdatePrice inputString ->
-- etcetera
Also, probably good to render these values in your view too:
[ input [ type' "text", placeholder "Enter a name...", onInput UpdateName,
value model.newName ][]
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.
>
And the update for Run then becomes something like
case msg of
Run ->
let
newID =
List.map (.id) model.articles -- get all IDs from the article list
|> List.maximum -- extract the maximum value (this is a Maybe type,
because the list could be empty)
|> Maybe.withDefault 0 -- so give it a default value of 0
newArticle = { id = newId, name = model.newName, ... (etcetera) }
in
{ model
| articles = newArticle :: model.articles
, newName = "" -- reset the input fields after adding
, ... (etcetera)
}
--
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 elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: How to insert an object into a list from a form
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 elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
