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)] 
    ] 

С помощью этого кода я получаю

The 1st element has this type: 

    VirtualDom.Node a 

But the 2nd is: 

    List (Html Msg) 

Answer 1

Проблема заключается в том, что thead и tr имеют тип 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

ИМО чистое решение лежит в @ wintvelt первый suggestion: table [] ([ myHeader ] ++ List.map ...). Для новых пользователей вяза, это кажется наиболее интуитивным. (BTW, я новый пользователь.)

По существу, здесь реализация выноса заключается в том, что компилятор вяза не группирует table [] [] ++ [] как table [] ([] ++ []) (например). Вместо этого, вяза группируют его как (table [] []) ++ []. Это имеет смысл, если вы думаете об этом.

Таким образом, оценка elm table [] [] ++ [] производит, во-первых, что-то типа Html msg (in Elm 0.18). После этого функция ++ перестает работать, когда она пытается объединить этот Html msg с 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) ] 
        ] 
       ] 
     )