如何從記錄列表動態創建錶行？

Question

我型號類型：

type alias Model = 
    { freeSyllables : List FreeSyllable 
    , freeSyllableInput : String 
    , usageStartInput : Bool 
    , usageMidInput : Bool 
    , usageEndInput : Bool 
    } 

的FreeSyllable類型的樣子：

type alias FreeSyllable = 
    { syllable : String 
    , usage : Usage 
    } 

的使用類型有三種布爾類型：

type alias Usage = 
    { start : Bool 
    , mid : Bool 
    , end : Bool 
    } 

我試着呈現每個項目的t他將FreeSyllables-List建模爲表格。

我沒有成功。

所以我的問題是我怎麼能動態地呈現每個模型的「FreeSyllables」到正確的HTML表，這些列：

• 音節（文本）
• 開始使用（複選框）
• 使用中期（複選框）
• 最終用途（複選框）
• 行動（保存鍵式）

Answer 1

你必須重視的事件處理程序（即火消息），但這裏是例子觀點：

view : Model -> Html Msg 
view model = 
    table [] <| 
     [ tr [] 
      [ th [] [ text "syllable" ] 
      , th [] [ text "start" ] 
      , th [] [ text "mid" ] 
      , th [] [ text "end" ] 
      , th [] [ text "actions" ] 
      ] 
     ] 
      ++ (List.map viewItem model.freeSyllables) 


viewItem : FreeSyllable -> Html Msg 
viewItem s = 
    tr [] 
     [ th [] [ text s.syllable ] 
     , th [] [ input [ type_ "checkbox", checked s.usage.start ] [] ] 
     , th [] [ input [ type_ "checkbox", checked s.usage.mid ] [] ] 
     , th [] [ input [ type_ "checkbox", checked s.usage.end ] [] ] 
     , th [] [ button [] [ text "save" ] ] 
     ]