榆树：如何在HTML列表中显示字符串列表？

Question

我正在编写一个elm程序，它应该在HTML列表中格式化其输出。我想要的功能，

inputs = ["first", "second", "third"]

并输出某种基本上是榆树Element，

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>

可悲的是，我找不到任何内置函数来执行此操作。也许markdown语法可以扩展为采用类似Mustache的模板，

[markdown|
{{#inputs}}
* {{text}}
{{/inputs}}
]

（抱歉，我不确定对于字符串数组而不是对象数组，正确的Mustache语法是什么。

原始的HTML元素发射也很好。提前致谢！

Answer 1

您想要在元素（即画布）中渲染还是真正以html渲染。如果是后者，那么你可以使用elm/html和

renderList : List String -> Html msg
renderList lst =
    ul []
        (List.map (\l -> li [] [ text l ]) lst)

或管道风格

renderList : List String -> Html msg
renderList lst =
    lst
       |> List.map (\l -> li [] [ text l ])
       |> ul []

或者以无点的方式

renderList : List String -> Html msg
renderList lst =
    lst
       |> List.map (li [] << List.singleton << text)
       |> ul []

Answer 2

当您开始编写函数时，定义函数的signature会很有帮助。签名写在函数定义之前的行上。你想要的签名是：

toHtmlList : List String -> Html msg -- here's the signature
toHtmlList strings =                 -- here's the start of the function body
  ???

此函数的输出具有Html msg类型，由elm-html包提供。您可以通过从项目根目录运行命令$ elm-package install elm-lang/html将其添加到项目中。

安装完成后，添加一个语句将Html导入到elm文件中，然后实现该功能。这是一个有效的实现：

StringList.elm

import Html exposing (..)

inputs = ["first", "second", "third"]

toHtmlList : List String -> Html msg
toHtmlList strings =
  ul [] (List.map toLi strings)

toLi : String -> Html msg
toLi s = 
  li [] [ text s ]

Answer 3

有趣的是，我认为榆树没有内置的Element列表。我不确定这是否是故意的，因为你可以推出自己的*，或者只是因为之前没有人需要非静态的事物列表。 （HTML列表在elm-lang.org网站上使用，但那些是我认为在MarkDown中定义的静态列表）

使用胡子语法的Markdown插值是implemented，但我不确定它的状态。无论如何，它并不像你所描述的那样强大。

发送原始HTML不是Elm的Graphics API的哲学的一部分。这个想法是，当前的HTML / CSS / JavaScript编写网站和Web应用程序的方式是一团糟，即使所有的库等都建立在它之上。所以Elms的方法是在它上面放一层抽象，这样你就可以谈论自然地水平和垂直堆叠的矩形Elements（使用flow *），以及可以放入Form（也是一个矩形）的自由形式的collages Element）。

*（见Daniëls用子弹回答一个，这个只是简单的）：

inputs = ["first", "second", "third"]
main = flow down <| map plainText inputs

Answer 4

您可以使用拼贴在Elm中编写项目符号列表：

bullet : Element
bullet = collage 12 20 [circle 3 |> filled black]

render : [String] -> Element
render = flow down . map (beside bullet . plainText)

main : Element
main = render ["first", "second", "third"]

实例：http://share-elm.com/sprout/538e460fe4b07afa6f981ab6