榆树:如何在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 []

Answer 2

当您开始编写函数时,定义函数的签名很有帮助.签名写在函数定义之前的行上.你想要的签名是:

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

您可以使用拼贴在 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