ELM - テーブルの行にリストの例では

Question

、HTMLにリストをマッピングするときに、私はいつも

ul [] 
    List.map toHtmlFunction myList 

のようなものを参照してください。しかし、リストが

のような子のhtml要素の一部だけ一部である場合、どのようなこのコードでは

... 
    table [] 
     [ 
     thead [] 
       [ 
       th [][text "Product"], 
       th [][text "Amount"] 
       ], 
     List.map toTableRow myList, 
     tr [] 
      [ 
      td [][text "Total"], 
      td [][text toString(model.total)] 
      ] 

     ] 


toTableRow: MyListItem -> Html Msg 
toTableRow myListItem = 
    tr [] 
    [ 
    td[][text myListItem.label], 
    td[][text toString(myListItem.price)] 
    ] 

私は問題はそのtheadとです

The 1st element has this type: 

    VirtualDom.Node a 

But the 2nd is: 

    List (Html Msg) 

Answer 1

を取得していますはHtml aのタイプで、List.mapはList (Html a)を返します。カンマを使用するだけで組み合わせることはできません。

List packageにリストをまとめるための機能があります。たとえば、あなたが

table [] 
    List.concat [ 
     [ thead [] 
      [ th [][text "Product"] 
      , th [][text "Amount"] 
      ] 
     ], 
     List.map toTableRow myList, 
     [ tr [] 
      [ td [][text "Total"] 
      , td [][text toString(model.total)] 
      ] 
     ] 
    ] 

Answer 2

ような何かを行うことができIMOクリーンソリューションは、@ wintvelt初suggestionにある：table [] ([ myHeader ] ++ List.map ...)。 elmの新しいユーザーにとって、これは最も直感的なようです。

ここでは、elmコンパイラがtable [] [] ++ []を（例えば）table [] ([] ++ [])とグループ化しないことを基本的に理解しています。代わりに、elmはそれを(table [] []) ++ []としてグループ化します。あなたがそれについて考えるなら、これは理にかなっています。

したがって、table [] [] ++ []のelmの評価では、最初にタイプHtml msg（Elm 0.18）が生成されます。その後、とListを組み合わせようとすると、++の機能が低下します。

（あなたがHtml属性の一部に間違った方法でListを追加しようとした場合当然のことながら、また、table [] ++ [] []を符号化することにより、あなたが同様のエラーメッセージが表示されます。）

ここで肉付けソリューションです、elm-make 0.18 (elm Platform 0.18.0)でテスト：

module Main exposing (main) 
import Html exposing (..) 

main : Program Never Model Msg 
main = 
    Html.program 
     { init = init 
     , view = view 
     , update = update 
     , subscriptions = subscriptions 
     } 
-- MODEL 
type alias Model = 
    { messages : List String } 

init : (Model, Cmd Msg) 
init = 
    (Model [], Cmd.none) 

-- UPDATE 
type Msg 
    = None 

update : Msg -> Model -> (Model, Cmd Msg) 
update msg { messages } = 
    case msg of 
     None -> 
      (Model messages, Cmd.none) 

-- SUBSCRIPTIONS 
subscriptions : Model -> Sub Msg 
subscriptions model = 
    Sub.batch 
     [] 

-- VIEW 
type alias MyListItem = 
    { label : String 
    , price : Float 
    } 

total : Float 
total = 
    5.0 

myList : List MyListItem 
myList = 
    [ { label = "labelA", price = 2 } 
    , { label = "labelB", price = 3 } 
    ] 

toTableRow : MyListItem -> Html Msg 
toTableRow myListItem = 
    tr [] 
     [ td [] [ text myListItem.label ] 
     , td [] [ text (toString myListItem.price) ] 
     ] 

view : Model -> Html Msg 
view model = 
    table 
     [] 
     ([ thead [] 
      [ th [] [ text "Product" ] 
      , th [] [ text "Amount" ] 
      ] 
     ] 
      ++ List.map toTableRow myList 
      ++ [ tr 
        [] 
        [ td [] [ text "Total" ] 
        , td [] [ text (toString total) ] 
        ] 
       ] 
     )