Elm: Как отобразить список строк в списке HTML?

Я пишу программу elm, которая должна форматировать свой вывод в списке HTML. Функция, которую я хочу, принимает,

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

и выводит какой-то Elm Element, который по существу,

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

К сожалению, я не могу найти встроенные функции для этого. Возможно, синтаксис markdown может быть расширен, чтобы использовать шаблоны, подобные Усы,

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

(извините, я не уверен, какой правильный синтаксис усов есть для массива-строк, а не для массива-объектов).

Исходный исходный HTML-элемент также будет приятным. Спасибо заранее!

Ответ 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 []

Ответ 2

Когда вы начинаете писать функцию, полезно определить сигнатуру вашей функции. Подпись пишется в строке перед определением функции. Подпись, которую вы хотите:

toHtmlList : List String -> Html msg -- here the signature
toHtmlList strings =                 -- here 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 ]

Ответ 3

Интересно, я не думаю, что Elm имеет встроенный Element для списков. Я не уверен, является ли это преднамеренным, потому что вы можете перевернуть свой собственный *, или если это так, что раньше никто не нуждался в нестационарном списке вещей. (HTML-списки используются на веб-сайте elm-lang.org, но это статические списки, которые, как мне кажется, определены в MarkDown)

Интерпретация Markdown с синтаксисом усов была реализована, но я не уверен в ее статусе. И во всяком случае это было не так сильно, как то, что вы описываете.

Испускание необработанного HTML не является частью философии Elm Graphics API. Идея заключается в том, что текущий HTML/CSS/JavaScript способ написания веб-сайтов и веб-приложений - это беспорядок, даже со всеми библиотеками и т.д., Построенными поверх него. Таким образом, путь Elms - это наложить на него слой абстракции, чтобы вы могли просто говорить о прямоугольном Element, который естественно складывается горизонтально и вертикально (с помощью flow *), а свободная форма Form, которая может быть помещена в collage (который снова является прямоугольником Element).

* (см. Даниэль отвечает за одного с пулями, это просто голые кости):

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

Ответ 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