2016-10-20 1 views
1

j'ai copié ce code tout le monde peut essayer http://elm-lang.org/tryElm - Mise à jour des champs Dynamiquement dans Elm

import Html exposing (..) 
import Html.App as App 
import Html.Attributes exposing (..) 
import Html.Events exposing (..) 


main = 
    App.program 
    { init = init 
    , view = view 
    , update = update 
    , subscriptions = \_ -> Sub.none 
    } 


init = 
    ({ posts = [], newPost = { title = "", slug = "" } }, Cmd.none) 


type alias Post = 
    { title : String 
    , slug : String 
    } 


type alias Model = 
    { posts : List Post 
    , newPost : Post 
    } 


type Msg 
    = NoOp 
    | NewPostField Post String String 


update msg model = 
    case msg of 

    NoOp -> 
     (model, Cmd.none) 

    NewPostField currentPost field newValue -> 
     case field of 

     "title" -> 
      ({ model | newPost = { slug = currentPost.slug, title = newValue } }, Cmd.none) 

     "slug" -> 
      ({ model | newPost = { slug = newValue, title = currentPost.title } }, Cmd.none) 

     -- The problem is here, I have to repeat this process for every field 

     _ -> 
      (model, Cmd.none) 


view model = 
    div [] 
    [ h1 [] [ text ("title : " ++ model.newPost.title ++ " | slug : " ++ model.newPost.slug) ] 
    , input [ onInput (NewPostField model.newPost "title"), placeholder "Title" ] [] 
    , input [ onInput (NewPostField model.newPost "slug"), placeholder "Slug" ] [] 
    , button [] [ text "Save" ] 
    ] 

Je minimisais les champs à deux (titre et limaces), mais il en existe d'autres comme: contenu, extrait.

Y at-il de toute façon je peux mettre à jour l'enregistrement sans créer un cas pour tous les champs, quelque chose comme mettre à jour seulement le champ nécessaire sans passer par tous?

Répondre

4

je changerais la chose suivante dans votre code:

Si vous avez un message spécifique pour chaque action vous pouvez avoir beaucoup plus propre update et view fonctions. Le compilateur vous aidera également à vérifier que vous gérez tous les cas et que vous ne passez pas un argument sans signification.

type Msg 
    = NoOp 
    | NewPostTitle Post String 
    | NewPostSlug Post String 

Cela ne vous épargnent trop taper, mais votre update ressemblera à ceci. Notez que vous n'avez plus de correspondance de modèle imbriquée. Notez également la syntaxe pour updating records, un champ à la fois. Enfin, à votre avis, vous n'aurez pas à passer le paramètre string, ce qui rend le code un peu plus concis. Mais la partie la plus importante est que maintenant c'est sécurisé.

view model = 
    div [] 
    [ h1 [] [ text ("title : " ++ model.newPost.title ++ " | slug : " ++ model.newPost.slug) ] 
    , input [ onInput (NewPostTitle model.newPost), placeholder "Title" ] [] 
    , input [ onInput (NewPostSlug model.newPost), placeholder "Slug" ] [] 
    , button [] [ text "Save" ] 
    ] 
+0

Oui je l'ai fait tout d'abord, je suis à la recherche de façon plus efficace, plutôt que d'une mise à jour de fonction pour tous les domaines, (j'ai quelques modèles qui n'ont plus de 12 champs) – kayne

+0

J'aime cette réponse comme L'enregistrement Elm est un type statique. Si je veux avoir quelque chose de dynamique, j'utiliserais 'Dict' ou quelque chose comme ça. – Tosh

+0

Merci les gars, je pense que c'est le chemin à Elm, écrit trop, je m'en tiendrai – kayne