Elm:如何在HTML列表中显示字符串列表?

22

我正在编写一个elm程序,它应该以HTML列表的格式排列其输出。我所需要的函数包含:

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

并输出某种基本上是 Elm Element 的内容,

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

遗憾的是,我找不到任何内置函数来完成这个任务。也许可以扩展markdown语法以使用类似于Mustache的模板。

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

(抱歉,我不确定字符串数组的正确Mustache语法,而不是对象数组。)

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


1
你要找的词是“markdown插值”,这是一些时间之前讨论过的内容,当我抱怨与此非常相似的问题时。也许这会对你有所帮助:https://groups.google.com/forum/#!searchin/elm-discuss/markdown$20interpolation/elm-discuss/HXMZRmrQdzI/Z2hzt8LpxYwJ - Joe
4个回答

37

你希望将内容渲染在一个元素(比如画布)中还是真正地作为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 []

2
我非常确定这就是OP真正想要的,因为他在评论中提到了“让浏览器(+ CSS)格式化它”。问题在于,他要求帮助将其格式化为Elm Element,而这并不是他实际想要的(一个普通的HTML元素)。因此,你的回答是第一个解决他真正想要的问题,而不是他所要求的问题。 - rmunn
他可能不知道Html库的存在。现在它也在核心中了。 - Adam Marshall
1
如果您想提出替代方案,请使用第二个(完整的)代码块。在此处阅读会令人困惑。 - Zimm i48
2
List.map,只是为了追求准确/对未来的像我这样的新手有帮助。 - Christopher G
1
真的很喜欢那个漂亮的管道风格。 - Natim

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来将其添加到项目中。
安装完成之后,需要在您的Elm文件中添加导入Html的语句,并实现该函数。下面是一个可工作的实现:

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 ]

1
有趣的是,我认为Elm没有内置列表的Element。 我不确定这是否是有意为之,因为您可以自己编写,或者仅仅是因为以前从未需要过非静态列表。 (HTML列表在elm-lang.org网站上使用,但那些是我认为在MarkDown中定义的静态列表)。
使用胡须语法的Markdown插值已经实现,但我对其状态不确定。 无论如何,它都不像您所描述的那样强大。
发出原始的HTML不是Elm的Graphics API哲学的一部分。理念是,当前编写网站和Web应用程序的HTML / CSS / JavaScript方式是一团糟,即使所有构建在其上的库等等也是如此。因此,Elm的方法是在其上放置一个抽象层,以便您可以仅谈论自然水平和垂直堆叠的矩形元素(使用flow*)以及可以放置在collage中的自由形式表单(这又是矩形Element)。
inputs = ["first", "second", "third"]
main = flow down <| map plainText inputs

0

你可以使用collage在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


哎呀,这不如让浏览器(+ CSS)格式化它看起来好看。 - gatoatigrado
你为什么认为它不够好? - Daniël Heres
文本换行,缺乏 CSS 样式,试图手动布局(注意:任意常数“12”和“20”)与让浏览器自动完成布局的区别,嵌套元素... - gatoatigrado
2
事实是,在Elm中,你可以将所有这些都抽象出来,或者完全控制视觉效果。 例如,你可以根据plainText的大小来改变'12'、'20'和'3'。 在HTML / CSS中,你不能做到这一点,因为没有函数可用(除非你使用预处理器或JavaScript)。 - Daniël Heres
是的,我宁愿放弃控制权,让浏览器/CSS 处理许多与我的应用程序功能无关的基本事项。不管怎样,感谢您的建议。 - gatoatigrado
share-elm.com似乎不再是一个有效的网址。 - TankorSmash

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接