Elm_guide_Forms
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Program]] ＞ [[JavaScript]] ＞ [[AltJS]] ＞ [[Elm]] ＞ ...
#norelated
#contents
//----------------------------------------
*フォーム [#l2f96d83]
-フォーム · An Introduction to Elm https://guide.elm-lang...
#code(haskell){{
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
-- MAIN
main =
Browser.sandbox { init = init, update = update, view = ...
-- MODEL
type alias Model =
{ name : String
, password : String
, passwordAgain : String
}
init : Model
init =
Model "" "" ""
-- UPDATE
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
view : Model -> Html Msg
view model =
div []
[ viewInput "text" "Name" model.name Name
, viewInput "password" "Password" model.password Pass...
, viewInput "password" "Re-enter Password" model.pass...
, viewValidation model
]
viewInput : String -> String -> String -> (String -> 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 ...
}}
うーん、何となく雰囲気だけはつかめるけど、やっぱまだよく...
モヤモヤの一因は、VIEWの部分でHTMLをレンダリングする仕組...
表示部分が全て関数のパーツになっており、双方向データバイ...
あと、MODEL、UPDATE、VIEWという３つのパートからElmアプリ...
終了行:
[[Program]] ＞ [[JavaScript]] ＞ [[AltJS]] ＞ [[Elm]] ＞ ...
#norelated
#contents
//----------------------------------------
*フォーム [#l2f96d83]
-フォーム · An Introduction to Elm https://guide.elm-lang...
#code(haskell){{
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
-- MAIN
main =
Browser.sandbox { init = init, update = update, view = ...
-- MODEL
type alias Model =
{ name : String
, password : String
, passwordAgain : String
}
init : Model
init =
Model "" "" ""
-- UPDATE
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
view : Model -> Html Msg
view model =
div []
[ viewInput "text" "Name" model.name Name
, viewInput "password" "Password" model.password Pass...
, viewInput "password" "Re-enter Password" model.pass...
, viewValidation model
]
viewInput : String -> String -> String -> (String -> 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 ...
}}
うーん、何となく雰囲気だけはつかめるけど、やっぱまだよく...
モヤモヤの一因は、VIEWの部分でHTMLをレンダリングする仕組...
表示部分が全て関数のパーツになっており、双方向データバイ...
あと、MODEL、UPDATE、VIEWという３つのパートからElmアプリ...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
