ELM - 清單錶行

在這些例子中，映射列表時到HTML，我總是看到類似ELM - 清單錶行

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)

來源

2016-06-14 Maarten

的問題是，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)] 
      ] 
     ] 
    ]

來源

2016-06-14 08:37:35 marcosh

或者你可以使用，而不是'''的'::運營商 - >'[THEAD [] []] :: List.map' – farmio

@farmio是的，這是另一個可行的選項 – marcosh

只需注意：如果使用'::'或類似的方法，則必須在整個li周圍使用圓括號st，否則elm將在第一個子/子列表之後停止評估。所以像'table []（[myHeader] ++ List.map ...）'或'table []（myHeader :: List.map ...）'' – wintvelt

IMO最乾淨的解決之道在於@ wintvelt的第一suggestion：table [] ([ myHeader ] ++ List.map ...)。對於榆樹的新用戶來說，這似乎是最直觀的。（順便說一句，我是一個新用戶。）

本質上，這裏的外延實現是elm編譯器不會將table [] [] ++ []組合爲table [] ([] ++ [])（例如）。相反，榆樹將它分組爲(table [] []) ++ []。這是有道理的，如果你想一想。

因此，榆樹對table [] [] ++ []的評價首先產生Html msg（以埃爾姆0.18爲單位）的某種東西。此後，當++函數試圖將Html msg與List組合起來時，該函數變得不起作用。

（當然，還有，如果你嘗試通過編碼table [] ++ [] []追加在錯誤的道路，以你的一些Html屬性的List，你會得到一個類似的錯誤消息。）

這裏有一個充實的解決方案，測試與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) ] 
        ] 
       ] 
     )

來源

2017-07-27 17:47:22 MarkDBlackwell

ELM - 清單錶行

回答

相關問題