Herramientas de usuario
wiki2:useful-elm
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
wiki2:useful-elm [2020/05/09 08:25] 127.0.0.1 editor externo |
wiki2:useful-elm [2021/05/01 11:56] (actual) |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== Useful Elm ====== | ====== Useful Elm ====== | ||
| - | ===== Tooling ===== | + | ===== Base structure ===== |
| + | <code> | ||
| + | module Happened exposing (..) | ||
| + | |||
| + | import Browser | ||
| + | import Html exposing (div, text) | ||
| + | |||
| + | main = | ||
| + | Browser.element | ||
| + | { init = init | ||
| + | , update = update | ||
| + | , subscriptions = subscriptions | ||
| + | , view = view | ||
| + | } | ||
| + | |||
| + | type alias Model = | ||
| + | { number: Int | ||
| + | , flags: Flags | ||
| + | } | ||
| + | |||
| + | initialModel : Flags -> Model | ||
| + | initialModel flags = { number = 0, flags = flags } | ||
| + | |||
| + | subscriptions : Model -> Sub Msg | ||
| + | subscriptions model = | ||
| + | Sub.none | ||
| + | |||
| + | type alias Flags = | ||
| + | { value : String | ||
| + | } | ||
| + | |||
| + | init : Flags -> (Model, Cmd Msg) | ||
| + | init flags = (initialModel flags, Cmd.none) | ||
| + | |||
| + | type Msg = NoMsg | ||
| + | |||
| + | update msg model = | ||
| + | case msg of | ||
| + | NoMsg -> (model, Cmd.none) | ||
| + | |||
| + | view model = div [] [text ("hello " ++ model.flags.value) ] | ||
| + | |||
| + | </code> | ||
| + | |||
| + | <code> | ||
| + | <div id="elm-app"></div> | ||
| + | <script src="{% dstatic 'js/elm-components.js' %}"></script> | ||
| + | <script> | ||
| + | var app = Elm.Happened.init({ | ||
| + | node: document.getElementById("elm-app"), | ||
| + | flags: { | ||
| + | value: "world" | ||
| + | } | ||
| + | }); | ||
| + | </script> | ||
| + | </code> | ||
| + | ===== Language toolbox ===== | ||
| + | ==== Packages ==== | ||
| Install a package: | Install a package: | ||
| <code> | <code> | ||
| Línea 9: | Línea 66: | ||
| * elm/json, for json encoding and decoding. | * elm/json, for json encoding and decoding. | ||
| * elm/http, for requests. | * elm/http, for requests. | ||
| + | |||
| + | ===== Libraries ===== | ||
| + | |||
| + | * [[https://www.elm-spa.dev/|elm-spa]] | ||
| + | ===== Code Examples ===== | ||
| + | |||
| + | ==== SPA ==== | ||
| + | |||
| + | * https://github.com/rtfeldman/elm-spa-example | ||
| + | * {{ :wiki2:elm:elm-spa-example-master.zip |}} | ||
| + | |||
| + | ==== eCommerce ==== | ||
| + | |||
| + | * {{ https://github.com/lucamug/elm-ecommerce }} | ||
| + | * {{ :wiki2:elm:elm-ecommerce-master.zip |}} | ||
| + | ===== How to... ===== | ||
| + | |||
| + | ==== Add several modules to one js script? ==== | ||
| + | |||
| + | We will need two "main" modules. Then compile it like this: | ||
| + | <code> | ||
| + | elm make src/Main1.elm src/Main2.elm --output=main.js | ||
| + | </code> | ||
| + | |||
| + | After this you can call it like this: | ||
| + | <code> | ||
| + | <div id="elm-app1"></div> | ||
| + | <div id="elm-app2"></div> | ||
| + | |||
| + | <script src="main.js"></script> | ||
| + | <script> | ||
| + | var app = Elm.Main1.init({ | ||
| + | node: document.getElementById("elm-app1") | ||
| + | }); | ||
| + | var app2 = Elm.Main2.init({ | ||
| + | node: document.getElementById("elm-app2") | ||
| + | }); | ||
| + | </script> | ||
| + | </code> | ||
wiki2/useful-elm.1589012709.txt.gz · Última modificación: 2020/05/09 09:25 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
