Elm 笔记（2）：文本框

官方例子二：Text Fields 学习。

概念

Model

type alias Model =
  { content : String
  }

• 这个示例的功能是“反转用户输入的文字”，这里将Model设置为Record类型方便以后添加更多的数据。
• Record：Record类型可以包含许多值，每个值都有一个名称（我理解为 key-value 型)。

View

view : Model -> Html Msg
view model =
  div []
    [ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
    , div [] [ text (String.reverse model.content) ]
    ]

• 创建一个含两个子元素的div。
• 注意到每个元素都是<元素名> [<元素属性>] [<内部内容>]的形式。
• 只要用户在 input 内输入时，onInput就会发送数据。（每个字符都会）

Update

type Msg
  = Change String

update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
      { model | content = newContent }

• 本例中只有一种Msg形式
• { model | content = newContent } 表示修改model中content的值为newContent。

练习

最后完成文档后留的作业：显示输入的字符的长度

-- 只修改 view 部分


view : Model -> Html Msg
view model =
  div []
    [ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
    , div [] [ text (String.reverse model.content) ]
    , div [] [ text (String.fromInt (String.length model.content)) ]
    ]