如何遍歷Elm視圖中的列表？

Question

我試圖矩形添加到使用在榆樹視圖通過以下方式的SVG：

view : Model -> Html Msg 
view model = 
    let 
     log1 = Debug.log "Time: " model.time 
     log2 = Debug.log "Coords: " model.coordinates 
     rects = [ ("200", "200"), ("210","201"), ("220", "202") ] 
    in 
    svg 
    [ width "700", height "700", viewBox "0 0 500 500" ] 
     [ rect [ x "100", y "100", width "600", height "600", fill "gray" ] [] 
     , List.map (\ coord -> (rect [ x (fst coord), y (snd coord), width "1", height "1", fill "black" ] [])) rects 
     ] 

有沒有辦法得到一個VirtualDom.Node型出來的圖，而不是List？

錯誤消息：

The 1st element has this type: 

     VirtualDom.Node a 

    But the 2nd is: 

     List (Svg a) 

Hint: All elements should be the same type of value so that we can iterate 
through the list without running into unexpected values. 

Answer 1

可以正好連接列表在一起，就像這樣：

svg 
[ width "700", height "700", viewBox "0 0 500 500" ] 
    ([ rect [ x "100", y "100", width "600", height "600", fill "gray" ] [] ] 
     ++ List.map (\ coord -> (rect [ x (fst coord), y (snd coord), width "1", height "1", fill "black" ] [])) rects) 

因爲第一列表是一個單一的元素，你也可以使用利弊運營商以及

svg 
[ width "700", height "700", viewBox "0 0 500 500" ] 
    (rect [ x "100", y "100", width "600", height "600", fill "gray" ] [] 
     :: List.map (\ coord -> (rect [ x (fst coord), y (snd coord), width "1", height "1", fill "black" ] [])) rects)