web-dev-qa-db-fra.com

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

J'écris un programme Elm qui devrait formater sa sortie dans une liste HTML. La fonction que je veux prend,

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

et produit une sorte de Elm Element qui est essentiellement,

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

Malheureusement, je ne trouve aucune fonction intégrée pour le faire. Peut-être que la syntaxe markdown pourrait être étendue pour prendre des modèles de type Moustache,

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

(désolé, je ne suis pas sûr de la syntaxe correcte de Moustache pour un tableau de chaînes, au lieu d'un tableau d'objets).

L'élément HTML brut émettant serait également Nice. Merci d'avance!

elm
16
gatoatigrado

Voulez-vous rendre dans un élément (c'est-à-dire une toile) ou vraiment en HTML? Dans ce dernier cas, vous pouvez utiliser Elm-lang/html et

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

ou en style de tuyauterie

renderList lst =
    lst
       |> List.map (\l -> li [] [ text l ])
       |> ul []
23
Simon H

Lorsque vous commencez à écrire une fonction, il est utile de définir sa signature _. La signature est écrite sur la ligne précédant 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 a le type Html msg, fourni par le package Elm-html . Vous ajoutez ceci à votre projet en exécutant la commande $ Elm-package install Elm-lang/html à partir de la racine de votre projet.

Une fois cela installé, ajoutez une instruction pour importer Html dans votre fichier Elm et implémentez la fonction. Voici une implémentation qui fonctionne:

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

Fait intéressant, je ne pense pas que Elm ait un Elementintégré pour les listes. Je ne suis pas sûr que ce soit intentionnel parce que vous pouvez créer votre propre fichier *, ou si c'est juste que personne n'a jamais eu besoin d'une liste non statique de choses auparavant. (Les listes HTML sont utilisées sur le site Web Elm-lang.org , mais ce sont des listes statiques que je pense sont définies dans MarkDown)

L'interpolation de démarquage avec la syntaxe moustache était implémenté mais je ne suis pas sûr de son statut. Et en tout cas, ce n'était pas aussi puissant que ce que vous décrivez.

L'émission de code HTML brut ne fait pas partie de la philosophie de l'API Graphicsd'Elm. L'idée est que la manière actuelle d'écrire des sites Web et des applications Web avec HTML/CSS/JavaScript est un véritable gâchis, même avec toutes les bibliothèques construites dessus. Elms a donc pour habitude de placer une couche d’abstraction afin que vous puissiez simplement parler de Elementname__s rectangulaire qui s’empilent naturellement horizontalement et verticalement (avec flowname __ *), et de forme libre Formnom____ qui peut être placé dans un collage(qui est de nouveau un rectangle Elementname__).

* (Voir la réponse de Daniël pour un avec des balles, celui-ci est juste les os nus):

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

Vous pouvez écrire une liste de puces dans Elm en utilisant 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"]

Exemple en direct: http://share-Elm.com/sprout/538e460fe4b07afa6f981ab6

0
Daniël Heres