![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
Program ＞ JavaScript ＞ AltJS ＞ Elm ＞ Elmガイド ＞ Elmアーキテクチャー ＞ フォーム
#code(haskell){{
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
main =
Browser.sandbox { init = init, update = update, view = view }
type alias Model =
{ name : String
, password : String
, passwordAgain : String
}
init : Model
init =
Model "" "" ""
type Msg
= Name String | Password String | PasswordAgain String
update : Msg -> Model -> Model
update msg model =
case msg of
Name name ->
{ model | name = name }
Password password ->
{ model | password = password }
PasswordAgain password ->
{ model | passwordAgain = password }
view : Model -> Html Msg
view model =
div [] [ viewInput "text" "Name" model.name Name , viewInput "password" "Password" model.password Password , viewInput "password" "Re-enter Password" model.passwordAgain PasswordAgain , viewValidation model ]
viewInput : String -> String -> String -> (String -> msg) -> Html msg
viewInput t p v toMsg =
input [ type_ t, placeholder p, value v, onInput toMsg ] []
viewValidation : Model -> Html msg
viewValidation model =
if model.password == model.passwordAgain then div [ style "color" "green" ] [ text "OK" ] else div [ style "color" "red" ] [ text "Passwords do not match!" ]
}}
うーん、何となく雰囲気だけはつかめるけど、やっぱまだよく分からないなー。
モヤモヤの一因は、VIEWの部分でHTMLをレンダリングする仕組みとかが、明確に分かっていないことだと思います。
表示部分が全て関数のパーツになっており、双方向データバインディングの実現を宣言的に書くという方法について、もう少し補足が必要ということでしょうかね？
あと、MODEL、UPDATE、VIEWという３つのパートからElmアプリが成る、ということだけど、全てが関数であり、VIEWも関数なので、VIEWにロジックが入りまくっていることが、通常のMVCモデルに慣れてる人から見ると、VIEWに違和感を感じる原因になっているかも？
