Elmのデータリストに新しいレコードを作成する

Question

ElmのAPIからリソースをロードするのが完了しました.1つのlitteの問題を除いて、すべて問題はありません。新しいレコードを更新または作成する方法はわかりませんそれを永続させる。

私はタイプメッセージ（私はこのデモのためにいくつかのコードをストライピング）

type Msg 
    = NoOp 
    | FetchSucceed (List User) 
    | FetchError Http.Error 
    | UpdateTitle String 
    | ... 



update msg model = 
    case model of 
    NoOp -> 
     (model, Cmd.none) 

    FetchSucceed newModel = 
     ({ model | users = newModel, isLoading = False }, Cmd.none) 

    FetchError _ = 
     ({ model | isLoading = False }, Cmd.none) 

    UpdateTitle newTitle = 
     -- I don't know what to put here, the previous messages 
     -- have a list, and I Just want to add ONE model 


view model = 
    div [] 
    [ List.map displayRow model.users 
    , formCreateUser {title = "", username = "", email = ""} 
    ] 

formCreateUser user = 
    div [] 
    [ input [ onInput UpdateTitle, placeholder "Title" ] [] 
    , button [ onClick SaveUser ] [ text "Save" ] 
    ] 

私はこのフォーム（formCreateUser）から新しいモデルを追加することができるのが大好きだが、私はこのエラーを取得しておくがあります。

The 3rd element has this type: 
    VirtualDom.Node Msg 

But the 4th is:  
    Html Link -> Html (String -> Msg) 

EDIT2：私はあなたの例のスニペットを理解していれば、あなたはリスト0を示してページを持っているいくつかのコンテキスト

Answer 1

を追加します。既存のユーザーであり、タイトルだけが与えられた別のユーザーを作成できる「クイック追加」フォームが必要です。私はこれを達成するための簡単な例を挙げていきます。これはあなたが遭遇した問題についてのいくつかの光をうまく発するはずです。

私はあなたのユーザーとモデルは現時点では次のようになりと仮定しています：

type alias Model = 
    { users : List User 
    , isLoading : Bool 
    } 

type alias User = 
    { title : String 
    , username : String 
    , email : String 
    } 

クイックフォームを追加することを持っているので、彼らがヒットするまで、私はあなたが新しいユーザーを追加したいとは思いません提出してください。念頭に置いという概念と、保留中の新しいユーザー・タイトル格納するためにしてみましょう更新モデル：

type alias Model = 
    { users : List User 
    , isLoading : Bool 
    , newUserTitle : Maybe String 
    } 

は、今、私たちはそれに応じてビュー機能を変更することができます。私たちは、テキストボックスに入力されたタイトルを表示したいので、のは、これにformCreateUserを変更してみましょう：viewニーズの呼び出し元のコードがあまりにも更新する意味

formCreateUser model = 
    div [] 
    [ input [ onInput UpdateTitle, placeholder "Title", value (Maybe.withDefault "" model.newUserTitle) ] [] 
    , button [ onClick SaveUser ] [ text "Save" ] 
    ] 

：

view model = 
    div [] 
    [ div [] (List.map displayRow model.users) 
    , formCreateUser model 
    ] 

は、今、私たちはUpdateTitleを処理する必要があります入力した内容を設定するメッセージ：

これで、送信ボタンも処理できるようになりました。新しいユーザーを作成し、既存のユーザーのリストに追加します場所です：あなたは、あなたはまた、適切なCmdを返したいあなたのAPIエンドポイントにそれを提出するSaveUserを望んでいた場合

SaveUser -> 
    case model.newUserTitle of 
    Nothing -> (model, Cmd.none) 
    Just title -> 
     ({ model 
      | newUserTitle = Nothing 
      , users = model.users ++ [{ title = title, username = "", email = "" }] 
      }, Cmd.none) 

、それはそうですあなたの質問の範囲外です。

これはすべてあなたの状況を処理する理想的な方法ではありませんが、この説明はこのタイプのものに必要なビルディングブロックの理解を深めることを願っています。私は貼り付けてelm-lang.org/tryで実行できるfull gist hereを投稿しました。