22

我正在编写一个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 元素也很好。提前致谢!

4

4 回答 4

35

您想在元素(即画布)中呈现还是真正呈现为 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 []
于 2015-11-22T20:30:22.253 回答
6

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

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 文件,并实现该功能。这是一个有效的实现:

字符串列表.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 ]
于 2016-05-04T14:00:00.230 回答
1

有趣的是,我认为 Elm 没有内置的Element列表。我不确定这是否是故意的,因为您可以自己滚动*,或者只是因为以前没有人需要非静态的事物列表。( elm-lang.org网站上使用了 HTML 列表,但我认为这些是在 MarkDown 中定义的静态列表)

实现了带有小胡子语法的 Markdown 插值,但我不确定它的状态。无论如何,它没有你描述的那么强大。

发出原始 HTML 不是 Elm GraphicsAPI 理念的一部分。这个想法是,当前编写网站和 Web 应用程序的 HTML/CSS/JavaScript 方式是一团糟,即使所有库等都建立在它之上。所以 Elms 的方法是在它上面放一层抽象,这样你就可以谈论Element自然水平和垂直堆叠的矩形(带flow*),以及Form可以放在 a 中的自由形式collage(又是一个矩形Element)。

*(请参阅 Daniëls 对一个有子弹的回答,这个只是简单的):

inputs = ["first", "second", "third"]
main = flow down <| map plainText inputs
于 2014-06-04T09:52:15.677 回答
0

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

于 2014-06-03T22:01:40.577 回答