Elm: Comment puis-je afficher une liste de chaînes dans une liste HTML?

Je suis en train d'écrire un l'orme programme qui doit son format de sortie dans une liste HTML. La fonction que je veux prend,

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

et les sorties d'une sorte de Elm Element qui est, essentiellement,

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

Malheureusement, je ne peux pas trouver toutes les fonctions intégrées pour ce faire. Peut-être le markdown syntaxe pourrait être étendue pour prendre en Moustache-comme modèles,

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

(désolé, je ne suis pas sûr de ce que le bon Moustache syntaxe est un tableau de chaînes de caractères, au lieu de tableau d'objets).

HTML brut élément émettant serait bien aussi. Merci à l'avance!

  • Le mot que vous cherchez est "markdown interpolation" et c'est quelque chose qui a été discuté un moment en arrière, lorsque je me suis plaint à propos de quelque chose de très similaire à cela. Peut-être que cela peut vous aider: groups.google.com/forum/#!searchin/elm-discuter/...
InformationsquelleAutor gatoatigrado | 2014-06-02
  1. 30

    Voulez-vous rendre dans un élément (c'est à dire de la toile) ou vraiment comme html. Si ce dernier, alors vous pouvez utiliser elm/html et 

    renderList : List String -> Html msg
renderList lst =
    ul []
        (List.map (\l -> li [] [ text l ]) lst)

    ou dans la tuyauterie de style

    renderList : List String -> Html msg
renderList lst =
    lst
       |> List.map (\l -> li [] [ text l ])
       |> ul []

    ou en point-style libre

    renderList : List String -> Html msg
renderList lst =
    lst
       |> List.map (li [] << List.singleton << text)
       |> ul []
    • Je suis assez sûr que c'est ce que l'OP voulait vraiment donné ses commentaires à propos de "le navigateur (+ css) formater". La chose est, il a demandé de l'aide à la mise en forme comme un Orme Element, ce qui n'est pas ce qu'il a réellement voulu (un simple élément HTML). Si la vôtre a été la première réponse qui a abordé ce qu'il a vraiment voulais, par opposition à ce qu'il demandé.
    • Il n'a probablement pas connaître le Html lib existé. Il est maintenant dans le coeur, trop.
    • Si vous souhaitez proposer une alternative, utiliser un deuxième (complet) du bloc de code. Il est difficile à lire ici.
    • List.map, juste pour être pédant ou utile à l'avenir les noobs comme moi
    • Vraiment aimé les belles tuyauterie style.
    InformationsquelleAutor Simon H
  2. 6

    Lorsque vous commencez à écrire une fonction, il est utile de définir vos signature. La signature est écrit sur la ligne avant de la définition de la fonction. La signature que vous voulez, c'est:

    toHtmlList : List String -> Html msg -- here's the signature
toHtmlList strings =                 -- here's the start of the function body
  ???

    La sortie de cette fonction est de type Html msg, qui est fourni par le elm-html paquet. Vous l'ajouter à votre projet en exécutant la commande $ elm-package install elm-lang/html de votre racine du projet.

    Une fois que c'est installé, ajoutez une déclaration à l'importation Html dans votre elm fichier, et de mettre en œuvre la fonction. Voici un travail de mise en œuvre:

    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 ]
    InformationsquelleAutor Eric
  3. 1

    Intéressant, je ne pense pas que l'Orme est doté d'un Element pour les listes. Je ne suis pas sûr de savoir si c'est volontaire, parce que vous pouvez rouler votre propre*, ou si c'est juste que personne n'a jamais eu besoin d'un non-statique de la liste de choses à faire avant. (HTML listes sont utilisées sur le elm-lang.org site web, mais ceux sont des listes statiques qui, je pense, sont définis en MarkDown)

    Markdown interpolation avec la moustache de syntaxe a été mise en œuvre mais je ne suis pas sûr de son état. Et de toute façon il n'était pas aussi puissant que la chose que vous décrivez.

    Émettant HTML brut ne fait pas partie de la philosophie de l'Orme du Graphics API. L'idée est que le cours HTML/CSS/JavaScript pour l'écriture de sites web et web applications est un gâchis, même avec toutes les bibliothèques, etc. construit au-dessus d'elle. Donc Ormes façon est de mettre une couche d'abstraction au-dessus de sorte que vous pouvez parler d'rectangulaire Elements qui, naturellement, pile à l'horizontale et à la verticale (avec flow*), et de forme libre Forms, qui peut être mis dans un collage (qui est encore une forme rectangulaire Element).

    *(voir Daniëls réponse pour une avec des balles, il est juste de bare-bones):

    inputs = ["first", "second", "third"]
main = flow down <| map plainText inputs
    InformationsquelleAutor Apanatshka
  4. 0

    Vous pouvez écrire une liste à puce dans l'Orme à l'aide d'un collage:

    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"]

    Live exemple: http://share-elm.com/sprout/538e460fe4b07afa6f981ab6

    • yeahhhhh, c'est pas aussi beau que d'avoir le navigateur (+ css) format
    • Pourquoi pensez-vous qu'il est pas aussi beau?
    • l'habillage du texte, manque de style css, essayant de faire de mise en page manuellement (remarque: les constantes arbitraires '12' et '20') vs avoir le navigateur le faire automatiquement, l'imbrication des éléments ...
    • La chose est, en Orme vous pouvez abstraite, soit tout de suite ou avez le contrôle complet sur l'aspect visuel. Vous pouvez modifier '12', '20', et '3' pour être dépendant de la taille du texte clair par exemple. Vous ne pouvez pas le faire en HTML / CSS, car il n'existe pas de fonctions (sauf si vous utilisez un préprocesseur ou l'utilisation de JavaScript).
    • Oui, je préfère abandonner le contrôle de beaucoup de choses de base, qui sont sans rapport avec mon fonctionnalités de l'application, prise en charge par le navigateur/css. Merci quand même pour votre suggestion.
    InformationsquelleAutor Daniël Heres