web-dev-qa-db-ja.com

Elm：HTMLリストに文字列のリストを表示するにはどうすればよいですか？

出力をHTMLリストにフォーマットする Elm プログラムを書いています。欲しい機能は、

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要素の出力もいいでしょう。前もって感謝します！

elm
21
gatoatigrado

要素（つまり、キャンバス）でレンダリングしますか、それとも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 []
31
Simon H

関数を書き始めるときは、関数の 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 ]
6
Eric

興味深いことに、Elmにはリスト用の組み込みElementはないと思います。自分でロールすることができるのでそれが意図的なものかどうか、または以前は静的でないもののリストを誰も必要としなかっただけなのかどうかはわかりません。 （HTMLリストは Elm-lang.org Webサイトで使用されていますが、これらはMarkDownで定義されていると思う静的リストです）

口ひげ構文を使用したマークダウン補間は 実装 でしたが、そのステータスがわかりません。とにかく、それはあなたが説明しているものほど強力ではありませんでした。

生のHTMLを出力することは、ElmのGraphics AP​​Iの哲学の一部ではありません。その考えは、ウェブサイトやウェブアプリケーションを書く現在のHTML/CSS/JavaScriptの方法は、その上に構築されたすべてのライブラリーなどがあっても、混乱しているということです。 Elmsの方法は、抽象化のレイヤーをその上に置くことです。これにより、自然に水平および垂直にスタックする長方形のElements（flow *を使用）、および自由形式のFormsをcollageに入れることができます（これも長方形のElementです）。

*（弾丸付きの場合は、ダニエルズの回答を参照してください。これは単なる骨組みです）：

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

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

0
Daniël Heres